ProblemYou want to change the appearance of input elements' background colors. Such effects can take you from Figure 7-2 to Figure 7-3. Figure 7-2. The form without stylesFigure 7-3. Styles applied to the input fieldsSolutionUse a class selector to design the input elements of the form: <h2>Simple Quiz</h2> <form action="simplequiz.php" method="post"> <p> Are you <input type="radio" value="male" name="sex" > Male or <input type="radio" value="female" name="sex" > Female? </p> <p> What pizza toppings do you like? <input type="checkbox" name="" value="l" > Pepperoni <input type="checkbox" name="" value="mushrooms" > Mushrooms <input type="checkbox" name="" value="pineapple" > Pineapple </p> <label for="question1">Who is buried in Grant's tomb?</label> <input type="text" name="question1" value="Type answer here" /><br /> <label for="question2">In what country is the Great Wall of China Located?</label> <input type="text" name="question2" value="Type answer here" /><br /> <label for="password">What is your password?</label> <input type="password" name="password" value="" /><br /> <input name="reset" type="reset" value="Reset" /> <input type="submit" name="Submit" value="Submit" /> </form> Then apply CSS rules to change the presentation of the input elements: .textinput { margin-bottom: 1.5em; width: 50%; color: #666; background-color: #ccc; } .pwordinput { color: white; background-color: white; } .radioinput { color: green; background-color: #ccc; } .checkbxinput { color: green; background-color: green; } DiscussionOpera is currently the only browser that allows radio buttons and checkboxes to be colored. Mozilla doesn't color them at all, while Internet Explorer for Windows ignores foreground color and colors the area around the widgets with the background color (see Figure 7-4). Figure 7-4. Using :focus to light up an input fieldRather than using class selectors as illustrated in the solution, another way to stylize different kinds of input fields is through attribute selectors. With attribute selectors, you remove class attributes from the HTML and use only the following CSS rules: input[type="text"] { margin-bottom: 1.5em; width: 50%; color: #666; background-color: #ccc; } input[type="password"] { color: white; background-color: white; } Although this works in most browsers, it doesn't work in Internet Explorer for Windows because this browser doesn't support attribute selectors at all. Attribute selectors currently work in Netscape Navigator 6+, Firefox, Safari, and Opera 5+. If you want to ensure cross-browser support, you need to use class selectors to determine styles for different form controls. See AlsoAppendix D; The CSS 2.1 specification for dynamic pseudo-classes at http://www.w3.org/TR/CSS21/selector.html#x33; the CSS 2.1 specification for attribute selectors at http://www.w3.org/TR/CSS21/selector.html#attribute-selectors. |