Styling Form Inputs with CSS

Styling textareas and select lists

Using CSS it is very simple to apply styling to our individual HTML form fields our inputs, textareas, and options. We can do this in exactly the same way as we do with any other HTML element by applying styling to the individual tag. For example, we can set the background and border properties of our textareas like so:

textarea {
	background-color: #CCFFFF;
	border: 1px solid black;
}

The same method applies when styling select lists. Note that we can also create different classes of styling within the select list, so that we can create different effects in different parts of the menu. For example:

option.heading {
	background-color: red;
	color: white;
	text-transform: uppercase;
}

option.choice {
	color: blue;
}

Let's apply this to an example option list to see its effect. Here's the code for our form:

<form>
<select>
Credit Card type:
<option class="heading">Select a card type</option>
<option class="choice">Visa</option>
<option class="choice">Mastercard</option>
<option class="choice">American Express</option>
</select>
</form>

When we apply our CSS styling to this HTML we get the following form:

Styling input (text, password, radio, checkbox) fields

The rules for styling input fields (i.e. text inputs, radio buttons and checkboxes) are largely the same as for styling any other area of our form. However, because all of these input types are declared using the <input> tag, we need a way to differentiate between them.

We do this by adding a class declaration into each of our input field declarations. For example, rather than simply writing <input type="text"> we would instead write <input type="text" class="text">. Note that the class name can be anything you like, but it's sensible to use a logical name that relates to the type of input. We can then adjust our CSS in the usual manner. For example, the following code would only affect inputs labeled with the text class:

input.text { background-color: red }

<input type="text" class="text" style="background-color: red" />

As well as styling each of our input types individually we can, if we want, style them all simply by adding our styling to the <input> tag, without specifying a class. However, you will often find that this produces some unwanted effects on certain input types.