Customising Form Fields
The problem with trying to customise form fields is that many elements of the form are controlled by different tags, so simply styling the <input /> (for example) would not change the appearance of drop-down menus, textareas, etc. The various form 'fields' are also one of the only elements that do not inherit the font (if specified in body) in most browsers.
'Outer' Form Elements
Elements that go 'around' your form fields..
Form
Starting with the obvious, we'll look at: <form>. You don't need to worry much about this in terms of customisation, because you'll not generally need to change it. However, all form fields need to be surrounded by one <form> </form> so that the fields are associated with the right form.
Fieldset
Next, <fieldset>. Not everybody uses <fieldset> — some people choose to wrap the elements they want grouped in paragraph tags — but I'm covering it anyway. In most browsers, <fieldset> has a boring border by default so we can customise it using 'normal' CSS, referencing it by the tag name, like so:
fieldset {
border: 0;
}
..this will remove the default border.
Legend
Inside the fieldset tag, you may choose to use <legend>. Support for this varies by browser, and it can be customised exactly the same way as the fieldset:
tagname {
property: value;
}
'Inner' Form Elements
Fields, textareas and the like..
Input
The most commonly used form element, in my opinion, is <input /> (or, <input> if you're not using XHTML) and it is thankfully the easiest to customise. Generally, the input can be customised in any way you fancy — you can add borders, background colours and/or background images. Going back to what I said earlier about not inheriting fonts, if you want your <input /> text to match your layout text, don't forget to redefine the font, e.g:
input {
font: 11px Verdana, Sans-Serif;
}
One benefit of the <input /> field is that you can customise the width. While I wouldn't recommend making your fields really big, or really small, this is ideal for when you have a name field (for example) which doesn't need to be as wide as a site url field. The one major problem with altering the size of your fields, however, is that the Submit/Reset buttons are controlled by <input /> — so, if you make your text fields 200 pixels wide, your button is going to be huge too. To combat this can assign the submit button an id, like so: <input type="submit" name="submit" id="submit" /> and customise it with CSS:
input {
font: 11px Verdana, Sans-Serif;
width: 200px;
}
input#submit {
width: 80px;
}
It is important that the additional width code for the submit button as defined in input#submit { } is below the original input { }, otherwise the 'cascade' won't work, and the input { } CSS will override our new width.
Textarea
Before I get into how to customise the textarea, I'm going to make a request on behalf of every standards-driven website owner out there: STOP using them as a way to 'hold' HTML. This is not the purpose of the <textarea>. You're abusing the poor tag. :(
I find customising <textarea>s with CSS a whole lot easier than using the <textarea>-based attributes 'rows' and 'cols' — this is because it's hard to tell how big a row or a column is. Using CSS you can specify a pixel based width and this will ensure your <textarea> looks the same across all browsers. This can be done like so (e.g.):
textarea {
font: 11px Verdana, Sans-Serif;
width: 200px;
height: 120px;
}
Don't forget, you can define other properties like background and border. In fact, you may want to assign a background image to your <textarea> to 'pretty' it up, like so:
This can be achieved by creating the background in your favourite graphics package, and customising like so:
textarea {
background-image: url(your-background.gif);
font: 11px Verdana, Sans-Serif;
width: 200px;
height: 120px;
}
Select (& Option)
Drop-down menus are a bit of a pain in the bum to customise exactly right because of the way the <option>s are nested inside. For example, if you customise the padding of a <select> drop-down, the drop-down itself will appear to have padding around it, but the text inside each <option> will appear to run 'into' the side of the menu. This is fixed by applying an equal padding to the select and option elements like so:
select, option {
padding: 5px;
}
We don't need to customise <select> and <option> all of the time though. Fonts, for example, need only be applied to <option>, yet if you want a border, that will need to be assigned to <select>. For example:
select, option {
padding: 5px;
}
select {
border: 1px solid brown;
width: 200px;
}
option {
font: 11px Verdana, Sans-Serif;
}
(in progress)
Tags:
forms, css, input, styling,
Last Updated On: 12th June 06 by Jem
Bookmark At: StumbleUpon, Digg
Handy Stuff
Downloads
Friends of 'TT'
Resources