Good morning,
I have a little problem i have a text input field with border radius and because of the border radius the first character that is typed kind of sticks out the input field how can i fix this? like a little bit of whitespace extra before the first character.
HTML
<label for="u_name">Gebruikersnaam</label>
<input type="text" name="u_name" value="">
CSS
input[type=text], [type=email], [type=password] {
width: 300px;
border-radius: 50px;
font-size: 15px;
display: block;
}
Well you simply have to add padding to your input and change its width according to padding size (box-sizing, as #Vucko said could do the trick, but IE8 doesn't support it).
input[type=text], [type=email], [type=password]{
width: 284px; /* this width is your initial width - padding-left - padding-right; */
padding:0 8px;
border-radius: 50px;
font-size: 15px;
display: block;
}
<label for="u_name">Gebruikersnaam</label>
<input type="text" name="u_name" value="">
Just change the style of the padding-left to 0
Just add padding-left to your input, check the fiddle.
padding-left: 10px;
DEMO
One solution is to use text-indent: 5px:
input[type=text], [type=email], [type=password] {
width: 300px;
border-radius: 50px;
font-size: 15px;
display: block;
text-indent: 5px;/*add text-indent*/
outline: none;/*also remove outline*/
}
<label for="u_name">Gebruikersnaam</label>
<input type="text" name="u_name" value="">
Also remove outline.
Related
Hello I want to set the light gray outline outside gray border line just like in the following image.either there is a border position set or blur effect the input text.
Please tell me how can I fix this issue? I am doing all of this in css.
.container {
background-color: aquamarine;
width: 100%;
height: auto;
}
input[type="text"],
textarea,
textarea.form-control {
background-color: #efeeef;
width: 396px;
height: 48px;
border-radius: 4px;
border: 3px solid #cecece;
}
textarea.form-control {
line-height: 50%;
font-size: 16px;
color: red;
font-weight: 500;
}
<div class="container">
<!--Form element-->
<form>
<fieldset>
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control textarea border-color outline" id="form-email">
</fieldset>
</form>
</div>
When I am using shade effects it is also useless.Is there any way to set the position of the border in this input area.
Borders cannot be set to blur (at least directly). If you are using some sort of CSS library, say Bootstrap then it may be adding box-shadow to the input elements.
Setting the box-shadow: none; on the required input should solve the problem.
I am not a expert but try
form{
border: 1px(thickness) outset(type of border) grey(color)
}
for more information go to this link:
https://www.w3schools.com/css/css_border.asp
I have a search bar on my website (link), with the form, input and button html markup. The height of the button is less than the input box if the resolution of the screen is not 100% i.e. you can see this by zooming in or out.
Screenshot:
Code:
<script src="https://use.fontawesome.com/85348ca6a3.js"></script>
<form action="index.php" method="post" class="srchForm" autocomplete="off" style="margin:auto;max-width:480px">
<input name="msg" id="search" type="text" placeholder="Search..." autofocus value= "<?php if(isset($_POST['msg'])) {
echo htmlentities ($_POST['msg']); }?>"></input>
<button type="submit"><i class="fa fa-search"></i></button>
<input type="submit" style="border:0; padding:0; font-size:0">
</form>
form.srchForm input[type=text] {
margin-top: 5px;
margin-left: 3.5%;
width: 81%;
font-size: 14px;
padding: 10px 20px 10px 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
form.srchForm button {
margin-top: 5px;
margin-right: 3.5%;
width: 12%;
padding: 10px;
font-size: 16px;
border-left: none;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
You should try flex. I tested your website it works.
form.srchForm {
display:flex;
}
form.srchForm input[type=text] {
margin-top: 5px;
margin-left: 3.5%;
width: 81%;
font-size: 14px;
padding: 10px 20px 10px 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
form.srchForm button {
margin-top: 5px;
margin-right: 3.5%;
width: 12%;
padding: 10px;
font-size: 16px;
border-left: none;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
<script src="https://use.fontawesome.com/85348ca6a3.js"></script>
<form action="index.php" method="post" class="srchForm" autocomplete="off" style="margin:auto;max-width:480px">
<input name="msg" id="search" type="text" placeholder="Search..." autofocus value= "asd"></input>
<button type="submit"><i class="fa fa-search"></i></button>
<input type="submit" style="border:0; padding:0; font-size:0">
</form>
Since the bar and the button both have static heights, I would just force that hight to prevent any weird rounding issue:
Add these CSS properties to your existing CSS rules:
form.srchForm input[type=text] {
height: 40px;
}
form.srchForm button {
height: 40px;
}
If this help, for me when I zoom to 200%+ it lines back up. Your website looks great btw! An helpful.
Also, I kno its kinda hacky but maybe make a horizontal container that's, say, 10% the height of the page, and the make the search bar and button's height 100%.
I want to complete en0ndev's answer and give some explanations. You encountered this problem because you used different font sizes for the items you needed to be displayed in line (while having the same height). You used:
form.srchForm input[type=text] {
font-size: 14px;
}
form.srchForm button {
font-size: 16px;
}
Even if the font size of the icon is larger than the input's text, the displayed item is smaller (use the same font size for both lowercase and uppercase letters, but the displayed height is different). Because the displayed height difference was small, it was not visible when the page was displayed normally, but when it was magnified, it became obvious. I enlarged the page and increased the font size of the icon button to 28px (when the display: flex was disabled in the form properties). Now the icon's box was bigger.
When using display: flex; on a parent element, all the child elements are displayed in line and stretched to the same height (of the highest element). By default, display: flex; includes align-items: stretch;
You need to change your font-size to match between the button and the search bar then it will line up.
I'm new to this site and a beginner at html and css. I'm working on a personal project for practice and the design calls for both the input box and submit button to be a height of 55px and a width of 320 px. Both of these include a 2px border and a 15px padding. I'm not sure why my current code is not producing the same sizes. The input button is clearly smaller (both width and height) than the input boxes.
Any help would be appreciated.
body {
background-color: blue;
}
/* LOGO */
.logo img {
height: 35px;
padding: 50px;
display: block;
margin: 0 auto;
}
/* FORM */
.form {
background-color: white;
width: 400px;
height: 500px;
padding: 40px;
border-radius: 5px;
margin: 0 auto;
}
h1 {
font-family: "Courier New", Courier;
font-weight: normal;
text-align: center;
padding: 20px;
}
input[type='email'],
input[type='password'],
button[type='submit']{
height: 38px;
width: 303px;
border: 2px solid gray;
padding: 15px;
margin: 15px auto;
display: block;
font-size: 15px;
border-radius: 5px;
}
button {
background-color: green;
}
span {
color: white;
}
<div class="logo">
<img src="images/logo.png" alt="AnalogSea logo">
</div>
<div class="form">
<h1>Sign up</h1>
<form action="/signup" method="post" class="form_section">
<label class="email button_size" for="email" required>Email</label><br>
<input placeholder="foo#bar.com" type="email" name="email" id="email"><br>
<label class="email button_size" for="password" required>Password</label><br>
<input placeholder="1234passw0rd" type="password" name="password"><br>
<button type="submit"><span>Sign Up</span></button>
</form>
</div>
The reason it's happening is the way the box-model is rendered in browsers. In your example, the padding is what is causing the issue. For the button, the padding and border is included in the 303px, so the button is a total of 303px wide. For the <input> elements, the padding and border is added to the total width, giving it a width of 337px.
To fix this you can go about it a couple ways. You can reset the box-sizing (the property in CSS that handles this) globally like:
* { box-sizing: border-box }
Or you can add that to just the <input> elements.
input[type="whatever"] { box-sizing: border-box }
I personally do it globally as a reset, to make things consistent. That's a my preference.
If you do this, you'll have to readjust the height on your elements to 68px, because now the padding will be considered as part of the height property, not added to it.
Here's some reading on the box-model: http://www.w3schools.com/css/css_boxmodel.asp
Here's some reading on the box-sizing property: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Hope this helps!
I would change:
<button type="submit"><span>Sign Up</span></button>
to
<input type='submit' value='Sign Up' />
then alter your CSS. This solution is more backward compatible, as well.
I want to have border to my label text and its associated textbox. I have used border-bottom property but because my label is padded to left its border is not right below it.
html
<div>
<span class="elements">
<label class="field" for="Title">Title</label>
<input name="Title" readonly="readonly" type="text" value="Mr">
</span>
</div>
css
.elements {
padding: 10px;
border-bottom: solid;
border-bottom-color: #1f6a9a;
}
.field {
font-size: 15px;
color: #b6d6ed;
padding-left: 44px;
}
label {
display: inline-block;
width: 80px;
}
input {
background-color: transparent;
border: 0 solid;
height: 25px;
width: 300px;
color: #b6d6ed;
}
jsfiddle : http://jsfiddle.net/2HARy/
I want to have border start from "Title" text only
Remove padding-left: 44px from the .field element and use a margin on the parent element instead. In doing so, the border will start at "title".
Updated Example
.elements {
padding: 10px;
margin-left: 44px;
border-bottom: solid;
border-bottom-color: #1f6a9a;
}
.field {
font-size: 15px;
color: #b6d6ed;
}
Additionally, if you want the border to start directly at the text, remove the padding-left on the .elements element. (example).
Since you have padding-left:44px there is no way to have the border start from the "Title" text. What you must do is remove that property from .elements, wrap .elements in a div, and apply the padding-left property to that div.
Here is a jsfiddle http://jsfiddle.net/3TChG/
I have a very little but hard (for me) problem to solve.
I have a text input, and a submit button. I need them to be the exact same height and for this to be true across Chrome and Firefox, ideally internet explorer also.
HTML
<input type="text" name="email" /><input type="submit" value="»" />
CSS
input[type=text] {
width: 218px;
}
input[type=submit] {
background: #000;
color: #fff;
}
input[type=submit], input[type=text] {
padding: 9px;
font-size: 18px;
line-height: 18px;
float: left;
border: 0;
display: block;
margin: 0;
}
I've setup this basic code on a jsfiddle here.
You should notice if you load it in chrome, the button is less height than the text input and in firefox, its larger.
What am I missing?
Remove/add line-height: 18px; for both.
Vertical padding of the submit button has no effect. This seems to be a webkit bug. You can solve the problem by specifying explit heights and increasing the height of the submit button by the top and bottom padding of the input field.
input[type=text] {height: 60px;}
input[type=submit] {height: 78px;}
The problem is your padding that is applying wrong to your button.
Trying solving it like this.
input[type=submit], input[type=text] {
font-size: 18px;
line-height: 18px;
float: left;
border: 0;
display: block;
margin: 0;
height: 30px; /* or whatever height necessary */
}
Additionally, you can keep the padding left and right on your button like this.
input[type=submit] {
background: #000;
color: #fff;
padding: 0px 9px;
}
input {
height: 19px;
}
This maybe?
Also, remove the padding property.
http://jsfiddle.net/xkeshav/e6aTd/1/
Maybe it's the padding that is making problems. Try removing the padding, setting the button to a fixed height and make the offset with line-height.
You need to remove the height and work on the actual height of the input text field just by padding/font-size
jsfiddle
Removing/adding line-height: 18px; for both is not a perfect solution because I see a little difference height in firefox...
The best solution I found is to put a div arround and set its style to display: flex.
All is perfect this way.
body {
background: #ccc;
}
div{
display: flex;
}
input[type=text] {
width: 218px;
}
input[type=submit] {
background: #000;
color: #fff;
}
input[type=submit], input[type=text] {
padding: 5px;
font-size: 25px;
border: 0;
margin: 0;
}
<div><input type="text" name="email" /><input type="submit" value="»" /></div>
TRY
body {
background-color: #ccc;
}
input[type=text] {
width: 218px;
}
Working DEMO