HTML and CSS Reference
In-Depth Information
and beveled borders. As you know,
border
,
font
, and
background-color
are all proper-
ties that you can modify using CSS. In fact, the following example uses all those proper-
ties:
Input
▼
<!DOCTYPE html>
<html>
<head>
<title>
Style Sheet Example
</title>
<style type=”text/css”>
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 11.20.
.
Output
FIGURE 11.20
A regular text input
field and a styled
text input field.
As you can see, the field that we applied styles to is radically different from the one that
uses the default decoration. You can do anything to regular form fields that you can do to
other block-level elements. In fact, you can make form fields look just like the rest of
your page, with no borders and the same fonts as your page text if you like. Of course,
