26
iPhone Form Example
As you’ll see on my demo page, I’ve added a navigation bar at the top that
skips down to different sections of the form. We can highlight any section
the user jumps to with the following CSS:
:target {
background-color: rgba(255,255,255,0.3);
-webkit-border-radius:
10px;}
3. e UI Element States Pseudo-Classes
:ENABLED AND :DISABLED
Together with :checked, :enabled and :disabled make up the
three pseudo-classes for UI element states. That is, they allow you to style
elements (usually form elements) based on their state. A state could be set
by the user (as with :checked) or by the developer (as with :enabled
and :disabled). For example, we could use the following:
input:enabled {
background-color: #dfd; }
input:disabled {
background-color: #fdd; }
This is a great way to give feedback on what users can and cannot fill in.
You’ll often see this dynamic feature enhanced with JavaScript.
iPhone Form Example
To illustrate :disabled in practice, I have disabled the form’s “Submit”
button in the HTML and added this line of CSS:
:disabled {
Smashing eBook #19│Mastering CSS3│ 140