Tech and Media Labs
This site uses cookies to improve the user experience.




CSS Form Styling

Jakob Jenkov
Last update: 2014-08-11

You can style HTML forms using CSS. By that, I mean you can style the individual form fields. The HTML form element is more like a semantic element, so it does not make sense to style that.

HTML forms are covered in my two other tutorials about HTML 4 form fields and HTML 5 form fields.

Styling input Elements

The most common form field to style is the input element. Actually, since the input element can be used to create several different types of input fields, you will typically not style all input elements equally. Rather, you will style the various different input fields differently. For instance:

input[type='text'] {
    border : 1px solid #cccccc;
}
input[type='submit'] {
    border : 1px solid #00ff00;
}

This example sets a gray border around text input fields, and a green border around submit buttons.

The following sections will explain in more detail how to style the various form fields.

Text Fields

Text fields are input elements with the type attribute set to text. Here is how the HTML looks:

<input type="text">    

And here is how a text field looks when rendered in the browser (not all browsers render text fields the same):

Text Field CSS Selector

To style all text fields (<input type="text" >) you need to use a combination of the element and attribute CSS selectors. Here is an example:

input[type='text'] {
    /* set CSS properties here*/        
}

Text Field Borders

It is possible to set the border style of a text field. This example sets a gray border around all text fields:

input[type='text'] {
    border : 1px solid #cccccc;
}

Here is how that looks when applied to a text field:

For more information about styling borders, see my tutorial about CSS borders.

Text Field Background Color

You can also set the background-color of a text field. Here is an example that sets both the border and background-color of a text field:

input[type='text'] {
    border           : 1px solid #cccccc;
    background-color : #e0e0e0;
}

Here is how the styled text field looks:

Text Field Width and Height

You can also set the width and height of a text field using the width and height CSS properties. Here is are a few examples:

input[type='text'] {
    width: 50px;
    height: 10px;
}
input[type='text'] {
    width: 100px;
    height: 15px;
}
input[type='text'] {
    width: 150px;
    height: 20px;
}

Here is how text fields look with these widths and heights applied:



Text Field Font

It is possible to set the font family and font size used by a text field. Here is an example:

input[type='text'] {
    font-family: Times;
    font-size  : 24px;
}

Here is how these styles look when applied to a text field:

For more information about the font CSS properties, check out my tutorial about styling text with CSS.

Text Areas

You can style the textarea HTML element in much the same way as you can with a text field. You can style the border, background-color, width and height like this:

textarea {
    border: 1px solid #cccccc;
    background-color: #eeeeee;
    width           : 400px;
    height          : 200px;
}

Here is how a textarea looks with these styles applied:

resize : none

By default the browser allows the user to resize the text area by dragging in the lower right corner of the textarea. To remove this resize handle you can set the resize CSS property to none, like this:

textarea {
    border: 1px solid #cccccc;
    background-color: #eeeeee;
    width           : 400px;
    height          : 100px;
    resize          : none;
}

Here is how the textarea looks with these styles applied:

Buttons

You can style buttons used in forms too. Buttons are input elements with the type set to button or submit, or button elements. Here are some examples of how the HTML looks like for buttons:

<input type="button" value="A Button">
<input type="submit" value="A Submit Button">
<button>A Button</button>    

Button CSS Selectors

You can style these three button elements using these three CSS selectors:

input[type='button'] {  }
input[type='submit'] {  }
button {  }

Button Styles

You can set borders, background colors, fonts and much more on buttons. Here is an example:

button {
    font-family      : Helvetica;
    font-size        : 24px;
    color            : #ffffff;
    background-color : #009900;
    border           : 3px solid #006600;
    padding          : 10px;
}

Here is how these styles look when applied to a button:

Button Hover Styles

You can set styles for when the mouse is hovering over a button too. Here is an example:

#theButton {
    font-family      : Helvetica;
    font-size        : 24px;
    color            : #ffffff;
    background-color : #009900;
    border           : 3px solid #006600;
    padding          : 5px;
}
#theButton:hover {
    background-color : #00cc00;
    border           : 3px solid #009900;
}

Here is how the styles look when applied to a button element:

Notice how the background color and border color changes when you hover the mouse above the button.

Labels

You can also style the label element, which normally contains the label for a given input field. A common way to style label elements is to give them all the same width. That way labels and fields are displayed nicely in a two-coloumn layout. Here is a code example:

<style>
    label {
        display: inline-block;
        width  : 200px;        
    }
</style>    
<label>Name</label> <input type="text"> <br>
<label>Address</label> <input type="text">

Here is how these two input fields look with these styles applied:


Notice how the labels and text fields are nicely aligned above each other. That happens because the label elements have the same width.

fieldset and legend

The fieldset and legend HTML elements are used to draw a box around a form, and write a legend in the top of the box (inside the border). Here is a code example:

<fieldset>
    <legend>Input Form</legend>

    <label style="display: inline-block; width: 150px;">First name</label> 
    <input type="text"><br/>
    <label style="display: inline-block; width: 150px;">Last name</label> 
    <input type="text"><br/>

</fieldset>

Here is how the code looks when rendered:

Input Form

You can set the border color, background color etc. of the fieldset element, just like if it was a text field. You can also set the font of the legend element as if it was a text element.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC