HTML and CSS Reference
In-Depth Information
<label>Text:
<input type="text">
</label>
<label>Range:
<input type="range">
</label>
<label>Radio:
<input type="radio">
</label>
<label>Checkbox:
<input type="checkbox">
</label>
It looks a little disorganized, so let's
add some styles to make things more
consistent:
input {
margin: 1em;
display: block;
width: 12em;
}
Clearly you want to apply different styles to input elements of type
radio
and
checkbox
. By selecting positively, you have two basic options:
select everything and then override (following, left), or explicitly select
only the items you want to style (following, right):
input {
margin: 1em;
display: block;
width: 12em;
}
input[type=radio],
input[type=checkbox] {
display: inline;
width: auto;
}
input { margin: 1em; }
input[type=text],
input[type=search],
input[type=tel],
input[type=url],
input[type=email],
input[type=password],
input[type=datetime],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime-local],
