I'm trying to style the legend in a fieldset and im running into a lot of troubles. As my site is responsive and the legend text length varies I can't achieve what I want consistently with margins, relative or absolute positioning.
<fieldset>
<legend>Title</legend>
<label>Label</label>
<input type="text">
</fieldset>
All I need is for the legend to behave like a normal block level. The only way ive found to do this is to wrap the legend in a span. Is this valid HTML? Im assuming that there arn't any CSS only solutions?
<fieldset>
<span>
<legend>Title</legend>
</span>
<label>Label</label>
<input type="text" />
</fieldset>
A legend element is only valid as the first child of a fieldset element. See the spec here.
I've created a fiddle here with your code that wraps the <legend> element in a <span>, and it causes an error in the W3C validator.
Another solution is to use CSS to hide the legend from view:
legend { display: none; }
Then you can create and style your own custom headings for the fieldset.
I generate the following HTML with Django:
<p>
<label for="id_username">
Username:
</label>
<input id="id_username" type="text" name="username" maxlength="30"></input>
</p>
... and use the following CSS code to try to decorate labels and text inputs:
form.registration p label,
form.registration p input
{
width: 250px;
}
In the end, the navigator (Firefox) only changes the width of the input text boxes, but not the one of the labels. Does anybody know why?
Generally, the default display for label in most browsers is display: inline. This means that a set width will not effect any changes. Add display: inline-block to the properties (this won't affect the <input>, which are already display: inline-block)
I'm trying to style a sibling related to an input with the -webkit-autofill pseudoclass like this:
input:-webkit-autofill~span.add-on { background-color: #FAFFBD;}
But it doesn't work. Is it posible to achieve what I'm trying? Or should I rely on javascript for this?
Updated with HTML:
<div>
<span class="add-on icon-user"></span
<input type="text" id="user_name" name="user[user_name]">
</div>
To clear up things, what I want to achieve is to set the same background color for the span element when the input is autofilled.
You can't style a preceding sibling with pure CSS. The selector ~ matches a sibling that comes after the first element.
Or as one could read it in the MDN docs:
The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.
https://developer.mozilla.org/en-US/docs/CSS/General_sibling_selectors
input:-webkit-autofill~span.add-on { background-color: #FAFFBD;}
would match the span in:
<div>
<input type="text" id="user_name" name="user[user_name]">
<span class="add-on icon-user"></span>
</div>
I am trying to display a number of inputs and their corresponding labels. They are both inline elements, and I have a working solution with adding a br tag at the end like so
<label for="hello"></label>
<input id="hello" type="text" />
<br>
<label for="stackoverflow"></label>
<input id="stackoverflow" />
Id like to solve this without extraneous HTML markup, i.e with CSS. What is the easiest way to do this?
I have viewed other questions similar to this, but aligning by row instead of by column.
You can wrap the labels around your inputs and display them as blocks:
<style>
label { display: block; }
</style>
<label>
Hello: <input name="hello">
</label>
<label>
StackOverflow: <input name="stackoverflow">
</label>
Note that when you do this you don't need to use the for="name" attribute.
The other way (if you don't want the labels wrapped around your inputs) is to float the labels to the left:
<style>
label { float: left; clear: left; }
</style>
However, I generally prefer a little more markup, something that connects the label and the input into one logical element, called a field:
<div class="field">
<label for="hello">Hello</label>
<input name="hello">
</div>
<div class="field">
<label for="stackoverflow">Stackoverflow</label>
<input name="stackoverflow">
</div>
Because each field is a div, it will display as a block automatically, but you can control it for individual fields as well.
Try to set display:inline-block for your input and label elements. So you can add all block element specific css like witdh or margin-bottom.
You can also set your input and label to display:block and add margin-bottom only to the the input. Or you can reverse it and add a margin-top to your labels ;)
If you want to remove the margin on the last element you can use input:last-child {margin-bottom:0;}
input, label {display:block;}
input {margin-bottom:18px;}
input:last-child {margin-bottom:0;}
/* Or to be specific you can use the attribut-selector
which only works on inputs with type="text"
*/
input[type="text"]:last-child {margin-bottom:0;}
Regarding html forms, a very common markup pattern is:
<form ...>
<p>
<label>Name:</label>
<input .../>
</p>
<p>
<label>Birthdate:</label>
<input .../>
</p>
..
<input type=submit/>
</form>
How much markup (classes, etc.) do you typically provide to allow for the most flexible visual formatting of the form? That is, how much markup do you add to help with your css selectors and do you use generic selectors?
<form ...>
<p class='name'>
<label>Name:</label>
<input .../>
</p>
<p class='birthdate'>
<label>Birthdate:</label>
<input .../>
</p>
..
<input type=submit/>
</form>
vs.
<form class='person' ...>
<p class='name string'>
<label>Name:</label>
<input .../>
</p>
<p class='birthdate date'>
<label>Birthdate:</label>
<input .../>
</p>
..
<input type=submit/>
</form>
In the second case, adding generic types ("date") straight from the database can make it more easy to consistently format date fields. Wrapping a grouping ("person") to show the model from which the fields come, can help too. (Or I could have used an internal DIV.) Yet, to increase css reuse, I find myself adding extra markup. In some books I've read I hear that the less markup, the better (and that line can be very gray though it rings true to me). For example, I could very well have used the markup from one of the prior blocks and added a lot more selectors to the css.
What are your principles for deciding just how much markup makes sense? Or how much to put on the css side?
Also, I know that I can select against the name of the input, but since that's a nested element I lose my ability to control formatting from the outer wrapper ("p") which is usually where I want that extra control.
I tend to use definition list tags to style my forms.
<form>
<dl>
<dt><label for="name">Name:</label></dt>
<dd><input name="name" /></dd>
<dt><label for="birthdate">Birthdate:</label></dt>
<dd><input name="birthdate" /></dd>
...
</dl>
</form>
I also use the following CSS:
FORM DT {
clear:both;
width:33%;
float:left;
text-align:right;
}
FORM DD {
float:left;
width:66%;
margin:0 0 0.5em 0.25em;
}
More information here: http://www.clagnut.com/blog/241/
It's a lot of markup, but the effect is consistent and effective.
Another arguably acceptable method of styling forms is to use tables. Just think of the form as "interactive tabular data."
I wouldn't use a <p> tag to group a label and its field, since it's not a paragraph. If you have no other use for <fieldset> you could use one per "row". If you have three inputs for birthday then a fieldset is totally appropriate.
A definition list as Gavin suggested isn't a bad idea but it does seem like unnecessary markup - you can just style the labels and inputs to the right widths and float them.
Adding wrapper classes is also perfectly valid - remember that you don't have to use them in CSS, they add a semantic layer regardless. There may even be a microformat you can use in some cases.
You can also use attribute selectors to style inputs nicely:
input[type="text"], input[type="password"] {
border: 1px solid #ccc;
background: #fff;
}
input[type="submit"], input[type="reset"] {
border: 1px solid #666;
background: #ccc;
}
I do try and keep html markup to a minimum.
HTML forms are the hardest thing to keep html and css to a minimum, as it is very hard to target all the various inputs across all browsers without adding classes to them, such as Textbox to textboxes etc.
If all your forms for that site use simple textboxes and not much of anything else, the minimal mark-up approach works just fine. However controls with complex mark-up such as the telerik RAD controls don't play with simple mark-up and often extra markup and classes are needed.
These small tricks add mark-up, but also make the css much cleaner and will no doubt making styling such elements much easier.
For other general html/css, I tend to use as few classes as possible, such as
.Menu {}
.Menu li {}
.Menu li a {}
This sort of pattern can be re-used a lot for repeated data, and templates can be made and designed with very little html mark-up.
Sometimes its un-avoidable adding classes and whatnot, but I think if your generally thinking about both css and html you should end up with slick markup.
From site to site, I rarely re-use CSS. Its so quick and easy knocking up styles for whatever you wish, re-designing an existing skin to fit a new site is often not worth it IMO.
Mainly with CSS I tend to take the knowledge i've learnt from previous sites and apply it to the new sites, to make coding for all browsers easy :)
After many years, I've arrived at:
<fieldset>
<div>
<label for="Whatever">A text field</label>
<input type="text" id="Whatever" />
</div>
<div class="required">
<label for="RequiredField">A required field</label>
<input type="text" id="RequiredField" />
</div>
<div class="stretch">
<label for="LongField">A long field (stretched across 100% form width)</label>
<input type="text" id="LongField" />
</div>
<div class="cmd">
<button type="submit">Do whatever</button>
</div>
<fieldset>
Additionally, I have two CSS classes that I can apply:
fieldset div {
clear: both;
}
fieldset.block label {
display: block;
font-weight: bold; /* labels above fields */
}
fieldset.aligned label:first-child {
width: 20%;
float: left;
}
fieldset.block .stretch input,
fieldset.block .stretch textarea,
fieldset.block .stretch select {
width: 100%;
}
fieldset.aligned .stretch input,
fieldset.aligned .stretch textarea,
fieldset.aligned .stretch select {
width: 79%; /* leave space for the label */
}
Personally I just do:
<form>
<label for="foo">Foo</label>
<input type="text" id="foo" name="foo" />
<br />
<label for="foo2" class="block">Foo 2</label>
<textarea id="foo2" name="foo2"></textarea>
<br />
Then for css it depends whether or not I want the element to be inline with it or not
form label.block{
display: block;
}
Or you can block + float them like #DisgruntledGoat wrote. (I really hate extra markup)