CSS Form Styling
Jakob Jenkov |
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:
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.
| Tweet | |
Jakob Jenkov | |
