Is there anything I can do to modify colors of a check box with css?

I have a check box like this: fiddle

<input type="checkbox" value="False" id=开发者_StackOverflow中文版"abc">

and in my css file:

#abc { background-color: Red; }

I want to modify it to make it so that when it's checked it becomes more visible, the background changes or I get a very thin border around the outside. But is seems like almost no css properties apply to this checkbox. I can't even change the height or size of font?

Can some person give me advice how I can change things with it.

It's browser-specific. You won't see anything in FF or Chrome, but you will on Opera, for example. Generally the background color and border are the styles you can effect if it's a browser that supports it, but I don't have an exhaustive list off the top of my head if there are more.

You cannot do much with the check box itself other than tweaking its opacity (e.g. start it from 0.8 and make it 1 when checked, so that it becomes more prominent).

However, you can achieve much more if you wrap the check box inside some other element (a <label> is both the natural choice and very practical) and styling that one instead.

See a live example of this in an update to your fiddle.

It depends a lot on what you actually want to do.

If you want a kind of highlight for the checkbox input as such, you might style the label/text/wrapping element instead of the checkbox itself, i.e.:

<label id="abc"><input type="checkbox" value="False" id="abc" />Bla</label>

If you want to style the actual checkmark box, you may need to use a kind of skinning as shown here for example:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Anyway this issue might heavily depend on the browser.

The best way for you to do this effectively and across all browsers is to actually hide the checkbox and create a clickable element that toggles the hidden field value in javascript. There is a jQuery UI button method of doing this.

Alternatively, here's some jQuery Pseudocode if yo want to get you started if you want to do it yourself:

<input type="hidden" name="terms" value="off" class="checkbox"/>
<span class="toggler off">Toggle Text, image, or just blank</span>

$('.toggler').click(function() {
    $input =  $(this).closest('input.checkbox');
    if($(this).hasClass('off')) {
        $input.val('on');
        $(this).removeClass('off');
    } else {
        $input.val('off');
        $(this).addClass('off');
    }
});

Get this working correctly and it will look/work the same across all browsers.