Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to format checkboxes and form buttons 1

Status
Not open for further replies.

tnsbuff

Technical User
Jan 23, 2002
216
US
Hi,

I'm using a slightly different background color for my form fields. How do I specify them in my style sheet? I know for regular input fields I use:

input {background-color: #F9F7F7}

... but that gives me a colored box around the outside of my checkboxes and radio buttons. I'd just like to leave them white like the page background. How do I specify the checkboxes in my style sheet since they are actually using the input tag? The same for the submit and reset buttons. How do I specify them separately since they too are "input" fields?

I've done a search but can't seem to find anything on the web about this. If anyone knows of a site, I'd really appreciate the url.

Thanks a bunch!
 
I can tell you how to do the background color on a checkbox, a drop down selection, a fill in field or a submit/reset button.

first of all,here is the css that I use (not saying it's the best) for all of the above.

SELECT {color: black; background: #e8e8e8 url('none');}
textarea {color: black; background: #e8e8e8 url('none');}
INPUT.text {color: black; background: #e8e8e8 url('none');}
INPUT.submit {color: black; background:#00bfff url('none'); font-weight: bold; border-width: 2px; border-color:#00bfff}
INPUT.reset {color: white; background: red url('none'); font-weight: bold; border-width: 2px; border-color:#00bfff}

All I've done is put the following on the submit/reset buttons: Class="submit" Class="reset"

This will change the color of the text and button and also change the background colors in the boxes.

Hope this makes sense and helps somewhat.
 
Thanks bgjacobs! I had tried input.checkbox, but it didn't work, and I think the reason was because I had defined:

input {background-color: #F9F7F7}
input.checkbox (background-color: #FFFFFF}

... instead of defining it as:

input.text (background-color: #F9F7F7}


... so I guess it overrode the checkbox properties.

Anyway, it works now, so you get a star! ;-)
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top