Dressy Form
The CSS for the Dressy Form.
Unless you have multiple forms on your site there is no need to assign the form a CSS class or ID. All you need is to identify the CSS design to be used on the "form" only
- Identify the "form"
- Set the required width for the form. For this form, width:330px;.
- Set the inside padding to pull the form fields from the edges of the form.
- Now add the border size, style and color. border:4px outset #900;
- Set the background color, background-color:#fff;
- And lastly the text color, color:#900;
- So for now we have the following CSS for the form
form {
width:330px;
padding:10px;
border:4px outset #900;
background-color:#fff;
color:#900;
}
Identify and add the background color and text color to the input fields.
form input, select, textarea {
background-color:#fdfaf1;
color:#900;
}
Lastly, style the "Submit" button. This requires the input to be assigned a class - (.button)
input.button {
font-size:1em;
font-weight:700;
padding:3px;
background-color:#900;
color:#fff;
}
Here is the HTML for the "Submit" button
<input class="button" type="submit" value="Submit" />
Note;
In the FireFox browser if you have a form "auto fill" feature in your toolbar, your selected background color for the input fields will be overwritten and display as always with the yellow background color.
Go ahead use the editor and play around with this form.