Problem
You want to stylize the color, padding, borders,
and rollover effects for Submit and Reset buttons on a form. Figure 5-7 shows a form without styles applied
to the buttons, and Figure 5-8
shows the form with stylized buttons.
Figure 5-7. The form buttons without styles applied
Figure 5-8. The form buttons with styles applied
Solution
<form action="simplequiz.php" method="post"> <label for="question">Who is president of the U.S.? </label> <input type="text" name="question" id="textfield" value="Type answer here" /><br /> <input name="reset" type="reset" value="Reset" class="buttonReset" /> <input type="submit" name="Submit" value="Submit" class="buttonSubmit" /> </form>
Then use CSS to stylize the buttons:
.buttonReset {
color: #fcc;
background-color: #900;
font-size: 1.5em;
border: 1px solid #660;
padding: 4px;
}
.buttonSubmit {
color: white;
background-color: #660;
font-size: 1.5em;
border: 1px solid #660;
padding: 4px;
}
Discussion
You also can stylize buttons using the ubiquitous rollover
state. To create rollovers for buttons, use a JavaScript function:
<script language="JavaScript" type="text/javascript">
function classChange(styleChange,item) {
item.className = styleChange;
}
</script>
Next, add two additional CSS rules, one for the rollover state
for the Reset button and another for the Submit button:
.buttonResetRoll {
color: white;
background-color: #c00;
font-size: 1.5em;
border: 1px solid #660;
padding: 4px;
}
.buttonSubmitRoll {
color: white;
background-color: #cc0;
font-size: 1.5em;
border: 1px solid #660;
padding: 4px;
}
After the function is in place and the extra CSS rules are set
up, place the events in the button markup so that you can toggle between the off
and on states of the form buttons (see Figure 5-9):
<form action="simplequiz.php" method="post">
<label for="question">Who is president of the U.S.?</label>
<input type="text" name="question" id="textfield"
value="Type answer here" /><br />
<input name="reset" type="reset" id="reset" value="Reset"
class="buttonReset"
onMouseOver="classChange('buttonResetRoll',this)"
onMouseOut="classChange('buttonReset',this)" />
<input type="submit" name="Submit" value="Submit"
class="buttonSubmit"
onMouseOver="classChange('buttonSubmitRoll',this)"
onMouseOut="classChange('buttonSubmit',this)" />
</form>
Figure 5-9. A rollover state created through CSS and JavaScript
As noted earlier, until Internet Explorer for Windows supports
attribute selectors, you'll need to use class selectors to set button styles
that can be seen in all browsers. Using attribute selectors to write CSS rules for the
form buttons doesn't require the extra markup in the HTML element that comes
from using class selectors. For example, the attribute selector syntax for the
buttons using only CSS would look something like this:
input[type="reset"] {
color: #fcc;
background-color: #900;
font-size: 1.5em;
border: 1px solid #660;
padding: 4px;
}
input[type="submit"] {
color: white;
background-color: #660;
font-size: 1.5em;
border: 1px solid #660;
padding: 4px;
}
