ptg16476052360 LESSON 12: Designing Forms
fields themselves using style properties. As you can see from the screenshots so far, regu-
lar form controls might not blend in too well with your pages. The default look and feel
of form controls can be altered in just about any way using CSS. For example, in many
browsers, by default, text input fields use Courier as their font, have white backgrounds,
and have beveled borders. As you know, border, font, and background-color are all
properties that you can modify using CSS. In fact, the following example uses all those
properties:Input ▼
<!DOCTYPE html>
<html>
<head>
<title>Style Sheet Example</title>
<style>
input.styled
{
border: 2px solid #000;
background-color: #aaa;
font: bold 18px Verdana;
padding: 4px;
}
</style>
</head>
<body>
<form>
<p><label>Default</label> <input value="value"></p>
<p><label>Styled</label> <input value="value" class="styled"></p>
</form>
</body>
</html>The page contains two text input fields: one with the default look and feel, and another
that’s modified using CSS. The page containing the form appears in Figure 12.28.Output ▼
FIGURE 12.28
A regular text input
field and a styled
text input field.