HTML and CSS Reference
In-Depth Information
input[type="radio"]:checked+fieldset.extra {
display: block;
}
A fairly common convention with text inputs is to place a small hint into
the field. Doing this with the
value
attribute of the element can be prob-
lematic (causing the submission of the hint text or other oddities), so
HTML5 introduces the
placeholder
attribute. To accomplish this without
either attribute, you can create a second label element using JavaScript
and position it with CSS over the text input field (as deconstructed in
Figure 11.8
).
Figure 11.8
Deconstructing a
label covering the
input area of a
text field.
Getting users to interact with a site and share their information is the
primary purpose of any form, and for web apps or web-based promo-
tions, clicking the submit button may be the entire reason for the site's
existence. As such, submit buttons scream to be styled in ways that draw
the user to them. There are 101 different methods to enhance buttons;
this section offers a quick overview of the parts behind them.
A key hurdle to easy, flexible button styling is that buttons are just
one HTML element, and there is only so much that can be done to one
element. You can't manufacture extra hooks for styling like you saw in
the rounded corner examples and elsewhere in this topic, so you're stuck
