Styling forms with CSS

Forms come in all shapes and sizes but they all look the same and as such they all look really dull but you can change that by styling them with CSS so they match the theme of your site.

Forms come in all shapes and sizes but they all look the same and as such they all look really dull but you can change that by styling them with CSS so they match the theme of your site.

You can add styling to your form elements by using id for that element but you can only use that style once per page a better way of doing it is to using a class then you can have the style on the same page as many times as you like.

You can also style a form by assigning a style to the form element itself like input, textarea, select ..etc

Here are a few examples:

Changing the background colour of an input field with a class

here’s a basic input field with the usual values, to style this field I’m using a class. The class is defined in the style sheet you can call it pritty much what ever you like I’m using ‘button’ in this example

<input type="text" name="title" class="button" />

In the style sheet I’ve created a class using . then given it a name of button then I’m telling it what colour I want the background to be. You can change the text colour the same way.

.button {
  background-color:#3366FF; /*blue*/
}

This changes the background colour to blue. To use this class on any form element put the class in the element like ‘class="button"’

to style a form using it’s id its done almost the same way in the style sheet you would use # instead of . but the rest of the code is the same

#button {
  background-color:#3366FF; /*blue*/
}

then in the form instead of using class="button" you would use id="button" just remember an id can only be used once in the same page so it’s better to use a class instead.

<input type="text" name="title" id="button" />

If you wanted all you input fields to have the same style then instead of using an id or class you could use the element itself, in your style sheet you would use the element name followed by the style you want.

input {
background-color:#3366FF; /*blue*/
}

this would change all input fields to have a background colour of blue.

You can use the technique above to style any form element.

Changing the background colour of a textarea when it’s clicked on

This is useful as when a user goes to the textarea to enter some text the background changes colour so you immediately can see what form element you working on.

To achieve this in your style sheet use either a class or the element name with :focus then add your style. If you chose to use the element name then you don’t need to alter anything in your forms but if you chose a class then you add the class name to the form element.

/* for all textarea instances */
textarea:focus{
background-color:#ccc; /* gray */
}
 
*/ for a class */
.box:focus{
background-color:#ccc; /* gray */
}

then in you form

<textarea name="message" class="box" cols="50" rows="10"></textarea>

You can use this to style any form element as well.

With this knowledge you can create some very interesting looking forms that match the style of your site rather then standing out.

Hope this you’ll find this tutorial useful.