Pure css input group border issue - html

I'm using PureCSS and have a form that looks like:
<form class="pure-form">
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Username">
<textarea class="pure-input-1-2" placeholder="About me bio"></textarea>
</fieldset>
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Another Group">
<input type="text" class="pure-input-1-2" placeholder="More Stuff">
</fieldset>
<button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>
Here's a JSfiddle.
Basically my issue is that with the two input group, the borders on focus show around the entire input, but with the one input and one textarea group, the borders on focus don't show on top of the textarea.

Add position:relative to the textarea on focus. In addition, if you take the top:-2px off, you won't get a jump when you focus on it.
Fiddle
CSS
.pure-form .pure-group input:last-child,
.pure-form .pure-group textarea:last-child {
border-radius: 0 0 4px 4px;
}
textarea:focus{
position:relative;
}

Try adding :
margin-top: 1px;

If you have a look at the CSS for the first input field in you example you'll see:
pure-form .pure-group input:first-child {
top: 1px;
border-radius: 4px 4px 0 0;
}
The top: 1px is pushing the input field down one pixel and covering the text-area field below it. You could remove the top: 1px rule from the CSS or add a margin-top: 1px rule to the .pure-form .pure-group textarea:last-child class.

Related

CSS - Set Width of all label based on larger label width [duplicate]

I have a table with two columns, like this:
Firstname: Jeff
Where the first column is a label and the second one is an input. Now I'm setting the width of the label at 180px, but if there I have larger text (one word larger than 180px), it's not showed completely.
I've tried to set in css the width of the labels as 'auto', but I don't want different widths of labels in the same column.
The result shall look like this:
Firstname: Jeff
Enciclopedia: Yes
Town: Tokyo
How can I resolve this with Css?
Thanks a lot,
Jeff
You have to wrap each label-input combination in a element, and then wrap that element in some container. This container should have a min-width, and display: inline-block;.
Then you let all the input items float to the right, and you're done.
This results in a very simple, clean and semantic markup with eqaully clean and maintainable CSS, and no requirements for JavaScript, jQuery, or other fancy stuff.
You could make something like:
<form>
<fieldset>
<p><label for="lorem">lorem</label><input type="text" id="lorem" /></p>
<p><label for="ipsum">ipsum</label><input type="text" id="ipsum" /></p>
<p><label for="li">li</label><input type="text" id="li" /></p>
</fieldset>
</form>
with the css
fieldset {
min-width: 100px;
display: inline-block;
}
fieldset input{
float: right;
}
Here you can see how that looks.
Clearly you can style your form with margins, paddings etc.
And additionally if you want to have a wrapper that's semantically more accurate, you can use a ordered list. You can then style everything like you want to, and have even a nice additional wrapper (the <ol>) that you can use without adding semantic garbage.
A example would be:
<form>
<fieldset>
<legend>First Example:</legend>
<ol>
<li><label for="lorem">lorem</label><input type="text" id="lorem" /></li>
<li><label for="ipsum">ipsum</label><input type="password" id="ipsum" /></li>
<li><label for="li">li</label><input type="text" id="li" /></li>
</ol>
</fieldset>
<fieldset>
<legend>Second Example:</legend>
<ol>
<li><label for="a">a</label><input type="text" id="a" /></li>
<li><label for="b">b</label><input type="number" id="b" /></li>
<li><label for="c">c</label><input type="range" id="c" /></li>
</ol>
</fieldset>
<fieldset>
<legend>Third Example:</legend>
<ol>
<li><label for="XXXXXXXX">XXXXXXXX</label><input type="email" id="XXXXXXXX" /></li>
<li><label for="YYYYYYYYYYYY">YYYYYYYYYYYY</label><input type="search" id="YYYYYYYYYYYY" /></li>
<li><label for="z">z</label><input type="text" id="z" /></li>
</ol>
</fieldset>
</form>
styled by
fieldset {
border: 1px solid silver;
margin: 10px;
padding: 10px;
min-width: 100px;
display: inline-block;
}
fieldset li{
width: 100%;
display: block;
position: relative;
}
fieldset label{
margin-right: 10px;
position: relative;
}
fieldset label:after{
content: ": ";
position: absolute;
right: -0.2em;
}
fieldset input{
float: right;
}
would result in this view. You can even play around with it on this fiddle: http://jsfiddle.net/ramsesoriginal/b6Taa/
EDIT to show how this adds no markup
With the following html:
<form>
<label for="lorem">lorem<input type="text" id="lorem" /></label>
<label for="ipsum">ipsum<input type="text" id="ipsum" /></label>
<label for="li">li<input type="text" id="li" /></label>
</form>
and the following CSS:
form{
min-width: 100px;
display: inline-block;
}
form input{
float: right;
}
form label{
display:block;
margin-bottom: 2px;
}
You get the effect that you want. You can play around with it here. But adding <fieldsets> with <legend>s isn't adding unnecessary markup, on the contrary: it helps you to group the inputs. And adding a <ol> is semantically correct too, since the label/input combinations are semantic units and the form is a list of fields that have to be filled in a logical order.
Again, you can avoid the fieldsets, the lists, and everything and still achieve the desired effect, but semantically it would make sense to have at least the fieldset with a label..
EDIT2: this is how a "real" registration form with good semantic markup may look like:
<form>
<ol>
<fieldset>
<legend>Account</legend>
<li><label for="username">Username</label><input type="text" id="username" required /></li>
<li><label for="password">Password</label><input type="password" id="password" required /></li>
</fieldset>
<fieldset>
<legend>Personal Data</legend>
<li><label for="name">Name</label><input type="text" id="name" /></li>
<li><label for="surname">Surname</label><input type="text" id="surname" /></li>
<li><label for="dob">Date of birth</label><input type="date" min="1900-01-01" max="2012-02-17" placeholder="YYYY-MM-DD" id="dob" /><span class="additionalInfo">Please input the date of birth in the following format: YYYY-MM-DD</span></li>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<li><label for="email">E-mail</label><input type="email" id="email" required placeholder="example#example.com" /></li>
<li><label for="tel">Telephone number</label><input type="tel" id="tel" placeholder="(555) 555-5555"
pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /><span class="additionalInfo">Please input the telephone number in the following format: (555) 555-5555</span></li>
<li><label for="url">Website</label><input type="url" id ="url" placeholder="http://www.example.com"></li>
</fieldset>
<li><input type="submit" /></li>
</ol>
</form>
and the styling:
fieldset {
border: 1px solid silver;
margin: 10px;
padding: 10px;
min-width: 100px;
display: inline-block;
}
fieldset li{
width: 100%;
display: block;
position: relative;
margin-bottom: 2px;
}
fieldset label{
margin-right: 10px;
position: relative;
}
fieldset label:after{
content: ": ";
position: absolute;
right: -0.2em;
}
fieldset input{
float: right;
}
fieldset li .additionalInfo{
position: absolute;
padding: 5px;
margin-top: 5px;
display: none;
background-color: white;
border: 1px solid black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
}
fieldset li:hover .additionalInfo{
display: block;
}
I included some additional info, to show you how it would all come together to one logical entity. Similarly you could include errors and whatever else you may want to include. This is just a quick example i threw together, but it's should show that you can achieve interesting things with this technique. One thing I also changed was that I put the <ol> directly under the form, so you don't have to repeat it for every fieldset. I personally find this somehow.. unpleasing, but since you want to have minimal markup, this would work pretty well and would be very accessible. Again, read this article if you haven't. It provides some great insight in marking up correctly a form.
Oh, and the "real-life" example is visible here: http://fiddle.jshell.net/ramsesoriginal/b6Taa/9/show/
And you can play with it here:
http://jsfiddle.net/ramsesoriginal/b6Taa/9/
EDIT: i updated the last example
There was an error in my code. The wrapper element (the <li>in the second and in the last example, the <label> in the minimal one and the <p> in the first one should have at least 1 pixel margin at the bottom, or else some browsers see the input fields as overlapping and won't float them correctly. I updated the last example so that it works there, everywhere else you should keep this in mind.
The easiest would be to select a fixed size large enough.
If you really want to simulate the exact behavior of a table you have two choices:
use table
simulate table with CSS:
.block { display: table; }
.row { display: table-row; }
label { display: table-cell; }
With the following HTML:
<div class="block">
<div class="row">
<label>...</label><div class="value">...</div>
</div>
...
</div>
I don't think there exists another way of dealing with this.
If you really don't want to change your HTML, your only hope might be to use javascript.
simple solution would be to fix the length of the label which would accommodate the biggest lable (add some 50px extra so you can center it) and use text-align:center
Here's a fiddle for the same.. http://jsfiddle.net/mvivekc/4P58S/
hope it helps.
Set a minimum width which is the width of the typical widest label. Then use JavaScript to cope for edge cases. If the user doesn't have JavaScript, you can fallback to an 'OK' design.
Get the widest label in the form using the function from this answer, and then set the widths of all labels to that value.
This is a very similar setup to this answer although that one is setting <li>s instead of <label>s.
Hit and try to see what's the greatest label occupying. Assign that width to all other labels. Recommend you to put colons in a separate column. It looks clean.
try
label{
min-width:180px;
width:auto;
}

HTML - Why does input box have a box around it when selected [duplicate]

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it.
For the layout I am working on, this is distracting and does not look right.
<input type="text" name="user" class="middle" id="user" tabindex="1" />
Firefox does not seem to do this, or at least, will let me control it with:
border: x;
If someone can tell me how IE performs, I would be curious.
Getting Safari to remove this little bit of flare would be nice.
Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible.
In your case, try:
input.middle:focus {
outline-width: 0;
}
Or in general, to affect all basic form elements:
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):
[contenteditable="true"]:focus {
outline: none;
}
Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:
*:focus {
outline: none;
}
To remove it from all inputs
input {
outline:none;
}
This was confusing me for some time until I discovered the line was neither a border or an outline, it was a shadow. So to remove it I had to use this:
input:focus, input.form-control:focus {
outline:none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
This is an old thread, but for reference it's important to note that disabling an input element's outline is not recommended as it hinders accessibility.
The outline property is there for a reason - providing users with a clear indication of keyboard focus. For further reading and additional sources about this subject see http://outlinenone.com/
This is a common concern.
The default outline that browsers render is ugly.
See this for example:
form,
label {
margin: 1em auto;
}
label {
display: block;
}
<form>
<label>Click to see the input below to see the outline</label>
<input type="text" placeholder="placeholder text" />
</form>
The most common "fix" that most recommend is outline:none - which if used incorrectly - is disaster for accessibility.
So...of what use is the outline anyway?
There's a very dry-cut website I found which explains everything well.
It provides visual feedback for links that have "focus" when
navigating a web document using the TAB key (or equivalent). This is
especially useful for folks who can't use a mouse or have a visual
impairment. If you remove the outline you are making your site
inaccessible for these people.
Ok, let's try it out same example as above, now use the TAB key to navigate.
form,
label {
margin: 1em auto;
}
label {
display: block;
}
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
</form>
Notice how you can tell where the focus is even without clicking the input?
Now, let's try outline:none on our trusty <input>
So, once again, use the TAB key to navigate after clicking the text and see what happens.
form,
label {
margin: 1em auto;
}
label {
display: block;
}
input {
outline: none;
}
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
</form>
See how it's more difficult to figure out where the focus is? The only telling sign is the cursor blinking. My example above is overly simplistic. In real-world situations, you wouldn't have only one element on the page. Something more along the lines of this.
.wrapper {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
form,
label {
margin: 1em auto;
}
label {
display: block;
}
input {
outline: none;
}
<div class="wrapper">
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
</form>
<form>
First name:<br>
<input type="text" name="firstname"><br> Last name:<br>
<input type="text" name="lastname">
</form>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<form>
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
</form>
<form>
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
</form>
<form>
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio">
<label for="radio">Click me</label>
</fieldset>
</form>
</div>
Now compare that to the same template if we keep the outline:
.wrapper {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
form,
label {
margin: 1em auto;
}
label {
display: block;
}
<div class="wrapper">
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
</form>
<form>
First name:<br>
<input type="text" name="firstname"><br> Last name:<br>
<input type="text" name="lastname">
</form>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<form>
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
</form>
<form>
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
</form>
<form>
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio">
<label for="radio">Click me</label>
</fieldset>
</form>
</div>
So we have established the following
Outlines are ugly
Removing them makes life more difficult.
So what's the answer?
Remove the ugly outline and add your own visual cues to indicate focus.
Here's a very simple example of what I mean.
I remove the outline and add a bottom border on :focus and :active. I also remove the default borders on the top, left and right sides by setting them to transparent on :focus and :active (personal preference)
form,
label {
margin: 1em auto;
}
label {
display: block;
}
input {
outline: none
}
input:focus,
input:active {
border-color: transparent;
border-bottom: 2px solid red
}
<form>
<label>Click to see the input below to see the outline</label>
<input type="text" placeholder="placeholder text" />
</form>
So, we try the approach above with our "real-world" example from earlier:
.wrapper {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
form,
label {
margin: 1em auto;
}
label {
display: block;
}
input {
outline: none
}
input:focus,
input:active {
border-color: transparent;
border-bottom: 2px solid red
}
<div class="wrapper">
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
</form>
<form>
First name:<br>
<input type="text" name="firstname"><br> Last name:<br>
<input type="text" name="lastname">
</form>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<form>
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
</form>
<form>
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
</form>
<form>
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio">
<label for="radio">Click me</label>
</fieldset>
</form>
</div>
This can be extended further by using external libraries that build on the idea of modifying the "outline" as opposed to removing it entirely like Materialize
You can end up with something that is not ugly and works with very little effort
body {
background: #444
}
.wrapper {
padding: 2em;
width: 400px;
max-width: 100%;
text-align: center;
margin: 2em auto;
border: 1px solid #555
}
button,
.wrapper {
border-radius: 3px;
}
button {
padding: .25em 1em;
}
input,
label {
color: white !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" />
<div class="wrapper">
<form>
<input type="text" placeholder="Enter Username" name="uname" required>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</form>
</div>
The only solution that worked for me
The border is actually a shadow. So to hide it I had to do this:
input[type="text"]:focus{
box-shadow: 0 0 0 rgb(255, 255, 255);
}
input[type="checkbox"]:focus{
box-shadow: 0 0 0 rgb(255, 255, 255);
}
Edit 2021: you can now use this: https://github.com/WICG/focus-visible
Removing all focus styles is bad for accessibility and keyboard users in general. But outlines are ugly and providing a custom focussed style for every single interactive element can be a real pain.
So the best compromise I've found is to show the outline styles only when we detect that the user is using the keyboard to navigate. Basically, if the user presses TAB, we show the outlines and if he uses the mouse, we hide them.
It does not stop you from writing custom focus styles for some elements but at least it provides a good default.
This is how I do it:
// detect keyboard users
const keyboardUserCssClass = "keyboardUser";
function setIsKeyboardUser(isKeyboard) {
const { body } = document;
if (isKeyboard) {
body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass);
} else {
body.classList.remove(keyboardUserCssClass);
}
}
// This is a quick hack to activate focus styles only when the user is
// navigating with TAB key. This is the best compromise we've found to
// keep nice design without sacrifying accessibility.
document.addEventListener("keydown", e => {
if (e.key === "Tab") {
setIsKeyboardUser(true);
}
});
document.addEventListener("click", e => {
// Pressing ENTER on buttons triggers a click event with coordinates to 0
setIsKeyboardUser(!e.screenX && !e.screenY);
});
document.addEventListener("mousedown", e => {
setIsKeyboardUser(false);
});
body:not(.keyboardUser) *:focus {
outline: none;
}
<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p>
<button>This is a button</button>
This is anchor link
<input type="checkbox" />
<textarea>textarea</textarea>
<select/>
I tried all the answers and I still couldn't get mine to work on Mobile, until I found -webkit-tap-highlight-color.
So, what worked for me is...
* { -webkit-tap-highlight-color: transparent; }
:focus-visible
Good news for accessibility - Chrome & Firefox added support for
:focus-visible.
Hiding focus styles is bad practice due to accessibility requirements (keyboard navigation) which makes your websites less accessible.
Use :focus-visible pseudo-class and let the browser to determinate when to apply focus.
:focus-visible /* Chrome */
Note that Firefox supports similar functionality through an older, prefixed pseudo-class:
:-moz-focusring /* Firefox */
button {
color: #000;
background-color: #fff;
padding: 10px 16px;
margin: 10px 0;
border-radius: 4px;
}
button:focus {
box-shadow: 0 0 0 2px #E59700;
outline: 0;
}
button:hover {
background-color: #eee;
}
button.with-focus-visible:focus:not(:focus-visible) {
box-shadow: none;
outline: 0;
}
button.with-focus-visible:focus-visible,
button.with-focus-visible:moz-focusring {
box-shadow: 0 0 0 2px #E59700;
outline: 0;
}
<p>Click on the button using a mouse. Then try tabbing to the button.</p>
<button>without :focus-visible</button>
<button class="with-focus-visible">with :focus-visible</button>
docs: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
w3 specifications: https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo
You could use CSS to disable that!
This is the code I use for disabling the blue border:
*:focus {
outline: none;
}
This is a working example
Use this code:
input:focus {
outline: 0;
}
In Bootstrap 4 to remove border outline you can use shadow-none, it will remove focus outline.
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="text" class="form-control form-control shadow-none"
id="exampleInputEmail1"aria-describedby="emailHelp">
</div>
The textarea on focus may have box-shadow.. It can be removed like so:
textarea:focus{
outline: none!important;
box-shadow: none!important;
}
You can try this also
input[type="text"] {
outline-style: none;
}
or
.classname input{
outline-style: none;
}
None of the solutions worked for me in Firefox.
The following solution changes the border style on focus for Firefox and sets the outline to none for other browsers.
I've effectively made the focus border go from a 3px blue glow to a border style that matches the text area border. Here's some border styles:
Dashed border (border 2px dashed red):
No border! (border 0px):
Textarea border (border 1px solid gray):
Here is the code:
input:focus, textarea:focus {
outline: none; /** For Safari, etc **/
border:1px solid gray; /** For Firefox **/
}
#textarea {
position:absolute;
top:10px;
left:10px;
right:10px;
width:calc(100% - 20px);
height:160px;
display:inline-block;
margin-top:-0.2em;
}
<textarea id="textarea">yo</textarea>
You can remove the orange or blue border (outline) around text/input boxes by using: outline:none
input {
background-color: transparent;
border: 0px solid;
height: 20px;
width: 160px;
color: #CCC;
outline:none !important;
}
try this css, it work for me
textarea:focus, input:focus{ border: none; }
Remove the outline when focus is on element, using below CSS property:
input:focus {
outline: 0;
}
This CSS property removes the outline for all input fields on focus or use pseudo class to remove outline of element using below CSS property.
.className input:focus {
outline: 0;
}
This property removes the outline for selected element.
Try this:
*:focus {
outline: none;
}
This would affect all your pages.
In case the above solutions din't work, you might be using the bootstrap and therefore the .form-control class is applying box-shadow css property to your input field by default.
The solution will be:
.form-control {
box-shadow: none;
}
You should actually not use outline: none because if someone is using a high-contrast view then they will not be able to see the state change on a dark backgroud. Instead, you should use:
outline-color: transparent;

Bootstrap input borders overlap

I'm writing a form group with two inputs, and have set {margin-left:-5px} for the second one to remove spacing between them. However, when the first input is focused, the blue glowing effect of the right border is missing. I think it's covered by the left border of the second input, so I've tried to increase its z-index, but it doesn't work. How to solve this problem? Here are the html and css codes, and the problem is shown in the picture.
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" size="1" style="border-top-right-radius: 0; border-bottom-right-radius: 0">
<input type="text" class="form-control" size="1" style="border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -5px">
</div>
</form>
.form-control:focus {
z-index: 2;
}
problem image
Just add position: relative;
.form-control:focus {
position: relative;
}

Error in HTML form when using <label> tag

I am making a web form which I have working and am simply trying to style it using CSS before building a site for it. I have found that after adding label tags I am getting errors when I click on another box it jumps to the First Name box, the only way to fill out the form is to use Tab.
my HTML:
<label>
<form action="Register Keys site/form.php" method="post">
First Name: <input type="text" name="first_name"><br>
Last Name: <input type="text" name="last_name"><br>
Email: <input type="text" name="email"><br>
Phone Number: <input type="text" name="phonenumber"><br>
Information on Key: <input type="text" name="keyinfo"><br>
Password: <input type="text" name="password"><br>
Password Hint: <input type="text" name="passwordhint"><br>
<textarea rows="5" name="message" cols="30" placeholder="Please add any additional comments here"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>
</label>
CSS:
label
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
input
{
border:0;
padding:5px;
font-size:0.7em;
color:#aaa;
border:solid 1px #ccc;
margin:0 0 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 160px ;
}
textarea
{
border:0;
padding:5px;
font-size:0.7em;
color:#aaa;
border:solid 1px #ccc;
margin:0 0 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 160px ;
}
input:focus
{
border:solid 1px #EEA34A;
}
The written form is not correct, 'cos the entire form is wrapped in Label
when conventionally set so
<form action="">
<div> <label for=""> </ label> </ div>
<div> <input type="text"> </ div>
</form>
Which is possible without the div
You have wrapped a form element inside a label element. That’s invalid markup and has strange effects. See #verdesrobert’s answer for adequate use of label. And you should use label that way, for reasons of functionality.
But what are now trying to do, the styling of a form as a whole, can be done simply by setting CSS properties on the form element. For example:
form
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
(To use your styling. I would not recommend setting the width and the indentation in pixels but in em units.)
This is how you should use Label tag
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
To resolve this issue you need to modify html part.
You just need to replace tag label to div. Also replace css class name label to div. By doing this you may have this issue resolved.
Regards,
Vishal Bagdai
Because of the way label tags work, if the user clicks on anything inside the label tag, it will refocus, toggling control to the form (thus putting the cursor in the first textbox).
See: http://www.w3schools.com/tags/tag_label.asp
Instead of label, you want to use a div, and give it an ID (eg. divID), then change your css to:
#divID
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
or give it a class (eg. divClass) and change your css to:
.divClass
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}

CSS, how to create a label width of the longest containing text?

I have a table with two columns, like this:
Firstname: Jeff
Where the first column is a label and the second one is an input. Now I'm setting the width of the label at 180px, but if there I have larger text (one word larger than 180px), it's not showed completely.
I've tried to set in css the width of the labels as 'auto', but I don't want different widths of labels in the same column.
The result shall look like this:
Firstname: Jeff
Enciclopedia: Yes
Town: Tokyo
How can I resolve this with Css?
Thanks a lot,
Jeff
You have to wrap each label-input combination in a element, and then wrap that element in some container. This container should have a min-width, and display: inline-block;.
Then you let all the input items float to the right, and you're done.
This results in a very simple, clean and semantic markup with eqaully clean and maintainable CSS, and no requirements for JavaScript, jQuery, or other fancy stuff.
You could make something like:
<form>
<fieldset>
<p><label for="lorem">lorem</label><input type="text" id="lorem" /></p>
<p><label for="ipsum">ipsum</label><input type="text" id="ipsum" /></p>
<p><label for="li">li</label><input type="text" id="li" /></p>
</fieldset>
</form>
with the css
fieldset {
min-width: 100px;
display: inline-block;
}
fieldset input{
float: right;
}
Here you can see how that looks.
Clearly you can style your form with margins, paddings etc.
And additionally if you want to have a wrapper that's semantically more accurate, you can use a ordered list. You can then style everything like you want to, and have even a nice additional wrapper (the <ol>) that you can use without adding semantic garbage.
A example would be:
<form>
<fieldset>
<legend>First Example:</legend>
<ol>
<li><label for="lorem">lorem</label><input type="text" id="lorem" /></li>
<li><label for="ipsum">ipsum</label><input type="password" id="ipsum" /></li>
<li><label for="li">li</label><input type="text" id="li" /></li>
</ol>
</fieldset>
<fieldset>
<legend>Second Example:</legend>
<ol>
<li><label for="a">a</label><input type="text" id="a" /></li>
<li><label for="b">b</label><input type="number" id="b" /></li>
<li><label for="c">c</label><input type="range" id="c" /></li>
</ol>
</fieldset>
<fieldset>
<legend>Third Example:</legend>
<ol>
<li><label for="XXXXXXXX">XXXXXXXX</label><input type="email" id="XXXXXXXX" /></li>
<li><label for="YYYYYYYYYYYY">YYYYYYYYYYYY</label><input type="search" id="YYYYYYYYYYYY" /></li>
<li><label for="z">z</label><input type="text" id="z" /></li>
</ol>
</fieldset>
</form>
styled by
fieldset {
border: 1px solid silver;
margin: 10px;
padding: 10px;
min-width: 100px;
display: inline-block;
}
fieldset li{
width: 100%;
display: block;
position: relative;
}
fieldset label{
margin-right: 10px;
position: relative;
}
fieldset label:after{
content: ": ";
position: absolute;
right: -0.2em;
}
fieldset input{
float: right;
}
would result in this view. You can even play around with it on this fiddle: http://jsfiddle.net/ramsesoriginal/b6Taa/
EDIT to show how this adds no markup
With the following html:
<form>
<label for="lorem">lorem<input type="text" id="lorem" /></label>
<label for="ipsum">ipsum<input type="text" id="ipsum" /></label>
<label for="li">li<input type="text" id="li" /></label>
</form>
and the following CSS:
form{
min-width: 100px;
display: inline-block;
}
form input{
float: right;
}
form label{
display:block;
margin-bottom: 2px;
}
You get the effect that you want. You can play around with it here. But adding <fieldsets> with <legend>s isn't adding unnecessary markup, on the contrary: it helps you to group the inputs. And adding a <ol> is semantically correct too, since the label/input combinations are semantic units and the form is a list of fields that have to be filled in a logical order.
Again, you can avoid the fieldsets, the lists, and everything and still achieve the desired effect, but semantically it would make sense to have at least the fieldset with a label..
EDIT2: this is how a "real" registration form with good semantic markup may look like:
<form>
<ol>
<fieldset>
<legend>Account</legend>
<li><label for="username">Username</label><input type="text" id="username" required /></li>
<li><label for="password">Password</label><input type="password" id="password" required /></li>
</fieldset>
<fieldset>
<legend>Personal Data</legend>
<li><label for="name">Name</label><input type="text" id="name" /></li>
<li><label for="surname">Surname</label><input type="text" id="surname" /></li>
<li><label for="dob">Date of birth</label><input type="date" min="1900-01-01" max="2012-02-17" placeholder="YYYY-MM-DD" id="dob" /><span class="additionalInfo">Please input the date of birth in the following format: YYYY-MM-DD</span></li>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<li><label for="email">E-mail</label><input type="email" id="email" required placeholder="example#example.com" /></li>
<li><label for="tel">Telephone number</label><input type="tel" id="tel" placeholder="(555) 555-5555"
pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /><span class="additionalInfo">Please input the telephone number in the following format: (555) 555-5555</span></li>
<li><label for="url">Website</label><input type="url" id ="url" placeholder="http://www.example.com"></li>
</fieldset>
<li><input type="submit" /></li>
</ol>
</form>
and the styling:
fieldset {
border: 1px solid silver;
margin: 10px;
padding: 10px;
min-width: 100px;
display: inline-block;
}
fieldset li{
width: 100%;
display: block;
position: relative;
margin-bottom: 2px;
}
fieldset label{
margin-right: 10px;
position: relative;
}
fieldset label:after{
content: ": ";
position: absolute;
right: -0.2em;
}
fieldset input{
float: right;
}
fieldset li .additionalInfo{
position: absolute;
padding: 5px;
margin-top: 5px;
display: none;
background-color: white;
border: 1px solid black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
}
fieldset li:hover .additionalInfo{
display: block;
}
I included some additional info, to show you how it would all come together to one logical entity. Similarly you could include errors and whatever else you may want to include. This is just a quick example i threw together, but it's should show that you can achieve interesting things with this technique. One thing I also changed was that I put the <ol> directly under the form, so you don't have to repeat it for every fieldset. I personally find this somehow.. unpleasing, but since you want to have minimal markup, this would work pretty well and would be very accessible. Again, read this article if you haven't. It provides some great insight in marking up correctly a form.
Oh, and the "real-life" example is visible here: http://fiddle.jshell.net/ramsesoriginal/b6Taa/9/show/
And you can play with it here:
http://jsfiddle.net/ramsesoriginal/b6Taa/9/
EDIT: i updated the last example
There was an error in my code. The wrapper element (the <li>in the second and in the last example, the <label> in the minimal one and the <p> in the first one should have at least 1 pixel margin at the bottom, or else some browsers see the input fields as overlapping and won't float them correctly. I updated the last example so that it works there, everywhere else you should keep this in mind.
The easiest would be to select a fixed size large enough.
If you really want to simulate the exact behavior of a table you have two choices:
use table
simulate table with CSS:
.block { display: table; }
.row { display: table-row; }
label { display: table-cell; }
With the following HTML:
<div class="block">
<div class="row">
<label>...</label><div class="value">...</div>
</div>
...
</div>
I don't think there exists another way of dealing with this.
If you really don't want to change your HTML, your only hope might be to use javascript.
simple solution would be to fix the length of the label which would accommodate the biggest lable (add some 50px extra so you can center it) and use text-align:center
Here's a fiddle for the same.. http://jsfiddle.net/mvivekc/4P58S/
hope it helps.
Set a minimum width which is the width of the typical widest label. Then use JavaScript to cope for edge cases. If the user doesn't have JavaScript, you can fallback to an 'OK' design.
Get the widest label in the form using the function from this answer, and then set the widths of all labels to that value.
This is a very similar setup to this answer although that one is setting <li>s instead of <label>s.
Hit and try to see what's the greatest label occupying. Assign that width to all other labels. Recommend you to put colons in a separate column. It looks clean.
try
label{
min-width:180px;
width:auto;
}