|
|
CSS Form Element Tutorial
In this tutorial, I'll show you how to modify all the form elements on your UBB to fit just right with you design. Netscape 4.x has no, little, or buggy support for form attributes. Some elements can be set but will remain unchanged in Netscape, but others can cause serious errors.
|
|
|
|
|
|
General
The selectors we will need to work with for forms are INPUT, SELECT, and TEXTAREA. INPUT covers both text/password input areas and buttons. The examples we'll work with are based on the code from my site, so if you want to check it out, go ahead.
<style type="text/css">
INPUT {
background-color:#e0e0e0;
color:rgb(0,0,0);
font-size:8pt;
line-height:10pt;
font-family:verdana,arial,helvetica,sans-sarif;
}
SELECT {
background-color:#e0e0e0;
color:rgb(0,0,0);
font-size:8pt;
line-height:10pt;
font-family:verdana,arial,helvetica,sans-sarif;
}
TEXTAREA {
background-color:#e0e0e0;
color:rgb(0,0,0);
font-size:8pt;
line-height:10pt;
font-family:verdana,arial,helvetica,sans-sarif;
}
</style>
Input:
Select:
Textarea
That was pretty self-explanatory. You can change the background/foreground colors, the fonts, and more. You can also change the width and height of an element, as well as borders (3D).
|
|
|
|
More Attributes
More attributes can be used with form elements, including width, height, borders, font, colors, and many more. I already showed how to change common things like font and colors. Here are some less common ones.
INPUT {
width:300px;
height:50px;
background:rgb(255,0,255);
color:rgb(0,0,0);
border-style:solid;
border-color:rgb(0,0,0);
border-width:2px;
}
Believe it or not, that is a text field, like the username field on the UBB. You'll notice that when I defined a border, the border was no longer 3D. The same holds true for normal submit/reset buttons.
If you are using Netscape 4.x, you'll notice a 2-pixel wide border floating somewhere around the form field. This occurs because Netscape 4.x doesn't properly support this feature of CSS. It would be wise to not set a border for your form elements.
|
|
|
|
Scrollbars!
To change the colors of your scrollbar, follow this example (also from my site). Scrollbar properties work only in Internet Explorer 5.5, and are not standard CSS.
BODY {
scrollbar-face-color:rgb(224,224,224);
scrollbar-shadow-color:rgb(120,120,120);
scrollbar-highlight-color:rgb(200,200,200);
scrollbar-3dlight-color:rgb(200,200,200);
scrollbar-darkshadow-color:rgb(111,111,111);
scrollbar-track-color:rgb(191,191,191);
scrollbar-arrow-color:rgb(61,61,61);
}
Open this window to see the results.
|
|
|
|
Implementation
To implement all the changes I've shown, you have to create an internal or external stylesheet. To create an external style sheet, open a blank document and name it "filename.css". Do not include <style> tags in the file. To link that file to your HTML documents, add this above the <body> tag:
<link rel="stylesheet" type="text/css" href="filename.css">
To create an internal style sheet, add this to your header:
<style type="text/css">
CSS goes here..
</style>
|
|
|
|
|
|
|
|
|
|
|