Applying CSS to Forms
By Trenton Moss2004-06-24
Applying colours to the form
|
|
The three CSS commands we'll use to make those forms look good are border, background and color (you can also use any other CSS command, such as font, text size, bold etc.).
So, let's say we want the input boxes in this form to have a dark blue text colour and border and a pale orange background, and the submit button to have black text, an orange background and a dark blue border. In addition to the above CSS, we would add in the following commands:
.input-box
{
color: #26a;
background: #feb;
border: #26a solid 1px
}
.submit-button
{
color: #000;
background: #fb0;
border: 2px #9cf outset
}
(#26a is an abbreviation of #2266aa - you can apply this shorthand version with any colour value with repetitive numbers like this.)
We use ‘outset’ for the button's border so that it looks like a button. If we used ‘solid’ it would look flat. Here's how the form comes together:
One word of warning, be careful about using a light text colour for text with input boxes. More and more Internet users are using the Google Toolbar which fills in online forms for you. Whenever a form appears it automatically turns the background colour of input boxes to yellow - if you've specified white text it would be virtually impossible for your site visitors with this toolbar installed to see what they're writing when completing the form.
Tutorial Pages:
» The Original Form
» Positioning the form with CSS
» Applying colours to the form
» Formatting the whole form
» The final form
» Take this further
|
