HTML and CSS Reference
In-Depth Information
Styling form elements based on state
You saw several of CSS3's new dynamic pseudo classes for
HTML5 forms in chapter 3 when you learned about HTML5
forms. In this section, you'll see the full set in one place.
The first dynamic pseudo-classes we'll
consider are :enabled and :disabled . Here
are two text inputs, one of which is dis-
abled:
<label>Enabled
<input type="text">
</label>
<label>Disabled
<input type="text" disabled>
</label>
Form elements are enabled by default, so
this rule targets the first input:
input:enabled {
outline: 4px solid #000;
}
Most browsers make it fairly obvious
when a form control is disabled, but the
pseudo-classes allow you to add addi-
tional styling:
input:disabled {
outline: 4px solid #000;
}
If your form enables and disables controls
dynamically based on user input, then
:enabled and :disabled allow you to attach
transitions to the changes between the
two states; see chapter 9 for further
details.
Search WWH ::




Custom Search