Styling a form with CSS
Styling the input fields
Let’s add a simple border to our input fields by adding the following code:
form#simple input{
border:1px solid #14314f;
}
We use a descendent selector. A descendent selector refers to a tag that is a descendent of a parent tag. In our case, input is a descendent (child) of our form (parent). Using this selector, we style each input tag in our form with a solid blue border. Save your file and preview the results.
If you view this page in your browser you will see our first two input fields are correctly styled. However, moving down the page we also see that our radio and checkboxes are also styled with a border. The reason is text fields, radio buttons and checkboxes are in the same group, the input tag. We don’t want our radio buttons and checkboxes to have a border applied because it looks odd visually.
What to do?
The easiest solution is to create a custom class and apply to our first two text fields. This way, only the first two text fields will have a border applied and the remaining radio buttons and checkboxes will remain in their default state. Add the following CSS rule:
form#simple input.textbox{
border:1px solid #14314f;
background-color:#c90;
color:#14314f;
}
We create a custom class named textbox, which will only be applied to input tags in a form named simple to which the class is applied. The property-values are listed below:
- Border
- Set to 1 pixel, solid line of dark blue
- Background-color
- Sets a background color of gold
- Color
- Sets the text color to a dark blue, same as our border
When the browser reads the style sheet and the web page it does this: “Look for input tag(s) that have a class of textbox which are in a form named simple and apply the following styles.” Next you need to apply the class to the first two fields:
<tr>
<td>Name:</td>
<td><input name="Name" type="text" size="30" class="textbox"></td>
</tr>
<tr>
<td>E-mail</td>
<td><input name="Email" type="text" size="30" class="textbox"></td>
</tr>
Save your file and preview the results.
Class selectors to input text fields
Styling a select tag
Styling our select tag will be easy because there’s only one. We add the following rule:
form#simple select{
background-color:#14314f;
color:#c90;
}
We use a descendent selector to set any select tags which reside in a form named simple. The property-values are listed below:
- Background-color
- Sets a background color of dark blue
- Color
- Sets a text color of gold
When the browser reads the style sheet and the web page it does this: “Look for any select tag inside a form named simple and apply the following styles.” Save your file and preview the results.
Styling a text area tag
Styling our text area tag is also easy because there’s only one. We add the following rule:
form#simple textarea{
border:1px solid #14314F;
background-color:#c90;
color:#14314f;
font-family:Verdana,Helvetica,sans-serif;
}
We use a descendent selector to set any text area tags which reside in a form named simple. The property-values are listed below:
- Border
- Set to a 1 pixel, solid line, of dark blue
- Background-color
- Sets a background to a dark gold
- Color
- Sets a text color to a dark blue
- Font-family
- Sets a font family to Verdana
When the browser reads the style sheet and the web page it does this: “Look for any text area tag inside a form named simple and apply the following styles.” Save your file and preview the results.
You will notice your text area is a bit small in width and height. We can easily remedy this by adding the following to our existing rule:
form#simple textarea{
border:1px solid #14314F;
background-color:#c90;
color:#14314f;
font-family:Verdana, Helvetica, sans-serif;
width:200px;
height:100px;
}
Save your file and preview the results.
We'll finish by styling our submit and reset buttons next.