CSS: Form Elements

I want to modify form elements. For example, I would like to change the background color/border style/border color of my input boxes, as well as my submit buttons. I would also like to change the spacing that is automatically placed under a FORM element, as it messes up my layout. Thanks in advance!

The safe option is to define a CSS class and add this class to your elements.


The more modern browsers also support CSS attribute selectors (IE5.5 does not support it):


Check here for all CSS properties: http://www.w3.org/TR/CSS2/propidx.html

Hope this helps,
Jeroen

Jerom, this does not work for SELECT tags though. I can't get the background color to change for a select tag using a CSS class. Here is the code using ASP to populate the drop-down list.:

<STYLE TYPE="text/css">
.viewmode {background-color:transparent; border:1px solid #BE9D9D}
.editmode {none}
</STYLE>

<select size="1" id="BSite" name="BSite" class="viewmode" style="width: 396; height:396">
<%Response.Write("<option selected value=""Null""></option>")
Do While Not SiteRs.EOF
if SiteRs.fields("SiteID") = fSiteID then
Response.Write("<option selected value=" & SiteRs("SiteID") & """>" & _
SiteRs("SiteNumber") & " - " & SiteRs("SiteDescription") & "</option>")
else
Response.Write("<option value=" & SiteRs("SiteID") & """>" & _
SiteRs("SiteNumber") & " - " & SiteRs("SiteDescription") & "</option>")
end if
SiteRs.movenext
Loop
Set SiteRs=Nothing
%>
</select>

The ASP code above works though I have modified it here. The point is the class="viewmode" doesn't work for the SELECT tags but does work for the INPUT tags.

Any idea why?

IE has problems with 'transparent' at times...
The background works fine in my Mozilla and Opera7 browsers.
If you specifically give it a color, IE will display it (unless there's a background-color for the option elements defined. If you define a background color for an option, IE 5.5 applies it to the selectbox as well.).

Opera is the only one that really gets the border of a select box right (try a border of 100px).
Mozilla seems to be the only one that lets you correctly define a border for a selectbox option. Opera simply ignores it.

Jeroen

Specifying a color works perfectly. Your right, transparency is a problem with SELECT boxes. Thanks Jeroen for your quick reply!