Recipe 7.2. Setting Styles for Input Elements


Problem

You 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 styles


Figure 7-3. Styles applied to the input fields


Solution

Use 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; }

Discussion

Opera 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 field


Rather 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 Also

Appendix 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.




CSS Cookbook
CSS Cookbook, 2nd Edition
ISBN: 0596527411
EAN: 2147483647
Year: 2006
Pages: 235

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net