- 1). Change the size of contact form interface elements with the "width" and "height" properties. For example, add the following code between the "head" tags of your HTML document:
<style type="text/css">
.bigbutton{
width:100px;
height:50px;
}
</style>
Assign a submission button to the "bigbutton" class to make it large:
<input type="submit" value="Big Button" />
This large button makes your form more convenient for users with vision disabilities. Increase the size of text inputs used to collect names, addresses, email addresses, and phone numbers as well so users can read their entries more easily. It is easier to stylize specific form components using a class selector as above because most of them are "input" elements, and a type selector would affect them all. Use "auto" for the "width" or "height" property value to automatically scale that dimension. - 2). Change the background color of form elements with the "background" property. Add the following code between the "style" tags in the head section:
.red{
background:MistyRose;
}
You can use any of the CSS color names or a hexadecimal value like "#00ff00." Since elements can belong to more than one class, make a large button with a light red background with this code:
<input type="button" value="Big Red Button" />
Red is useful to indicate important parts of your form, like a social security number field, while other colors could indicate optional fields. Text inputs, "textarea" elements, "select" elements, "options" elements, and "form" elements themselves are affected by the "background" property. Check boxes and radio buttons are not. - 3). Add borders and/or outlines to form elements with another class declaration:
.bordered{
border:2px #00f000 solid;
outline:1px gray dashed;
}
Check boxes and radio buttons do not have borders applied to them, but can have outlines. All other form elements can have both. Consult W3schools.com for a list of possible border and outline styles. Use borders and outlines to distinguish more important contact form fields from similar neighbors, like primary and secondary phone number fields. - 4). Change the font and text style properties for form elements to complete your customizations. For example, add the following class:
.styletext{
font-size:16px;
text-shadow:1px 1px gray;
}
Buttons, text inputs, "textarea" elements, and "select" elements can have their text styled this way. You can also use properties like "font-weight," "font-family" and "font-style." Color the text using the "color" property. An individual "option" element can have text colored differently than its neighbors. Test out your code in different Web browsers to ensure your form renders properly.
Source...