Color around checkbox in a form (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Starhugger -> Color around checkbox in a form (5/14/2007 19:32:46)

I'm trying to put a colour around the outside of a checkbox in a form. Curiously, it works in IE7 but not in Firefox. I found a webpage that shows how to do it with CSS. I've tried these two ways but I can't get it to work in Firefox. 

CSS:
div.chkbox input { background-color: khaki }

FORM:
<div class="chkbox">
<input name="price2" type="checkbox" value="0.01" />
</div>

CSS: 
input.chkbox { background-color: khaki }

FORM:
<input name="price2" type="checkbox" class="chkbox" value="0.01" />

Any ideas?

Starhugger



Tailslide -> RE: Color around checkbox in a form (5/15/2007 2:33:59)

Forms are notoriously hard to style - the reason behind this (I think) is that it was thought that certain things should always look the same to avoid user confusion and forms were thought to be an important element that fell into this bracket (along with stuff like scrollbars).

I've found that this article: http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/ is the best on styling forms.



coreybryant -> RE: Color around checkbox in a form (5/15/2007 5:45:58)

Form Layout Example might help just a little, but I think it might be a few more years before we are actually allowed to mess with them

I played around once with text boxes and noticed a significant decline in the contacts. As suggested, it might be best to leave some things as is since people are used to some things



Starhugger -> RE: Color around checkbox in a form (5/15/2007 8:54:27)

Thanks, Tail and Corey. At least I *know* now that I'm up against a brick wall. Seems most browsers ignore styling of checkboxes, so no point anyway. And if you're right, Corey, that clickrates can go down, that's definitely not what I want.

Too bad. I had surrounded the checkboxes in khaki yellow, which made them look like little Suns! Very kewl 'n' groovy for my astrology website. [:D]

Oh well...

SH



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625