Styling Form Elements using the type Parameter
Sun May 27, 2012 - 03:26 pm
Omari Celestine
If you work with web forms on a regular basis or has done so at one time then you may have encountered the problem of all your form elements (text,checkbox,textarea etc.) obtaining the same styles when using the input {} selector for styling your form.
Well here is a very basic solution which would allow you to style each type of element individually based on the type="" attribute that you use on your forms.
For example, if we were to apply a specific style to all text boxes, we will use the following snippet in our style sheet.
input[type="text"] {
}
This way, only text boxes will obtain the style contained within that portion of our code.
So, let's say we want all text boxes to have a height of 32 pixels and selection menus to have a height of 48 pixels.
input[type="text"] {
height: 32px;
}
input[type="select"] {
height: 48px;
}
Now this is the basics behind styling form elements using the type parameter.
Note that we did not use the <style></style> as I would recomment applying all styles through a linked style sheet (css).