How change css of disabled input checkbox tag?..because it's too light and hard to see

Guys, I have some input checkbox tags: They look pret开发者_如何学Cty light and hard to see or print. I tried restyle the checkbox, it seems that the disabled checkbox's style can't be changed? Do you guys have any idea? Thanks a lot! :)

The trick is to not actually disable the checkbox but intercept the click action of the "disabled" textbox so it functions as if it was disabled from that point you can style it and it will look how you want.

What you will do is add this on your "disabled" checkboxes instead of disabled="disabled":

onclick="return false;"

EDIT: As someone noted below there is a drawback to using this method. The value of the checkbox will still be posted back to the server since it is technically enabled whereas if you used the supported method you would lose control over the look but wouldn't have to deal with this additional data. (Thanks Robert)

If you're using default checkboxes with default styling, you shouldn't worry too much. They've designed them just fine to be seen as they should be.
Could as well be your monitor contrast/brightness setting.

but if you're using some custom checkbox design, you will most probably have to change images.

With a bit of CSS3 you can actually do some pretty cool stuff about it.

I came up to this possible solution http://jsfiddle.net/HCbRF/1/

HTML

<div>
    <input type="checkbox" id="c1" disabled />
    <label for="c1"><span></span>Check Box 1</label>
    <br>
    <input type="checkbox" id="c2"/>
    <label for="c2"><span></span>Check Box 2</label>
</div>

CSS

div {
    width:110px;
    height:50px;
    padding:20px;
    background:#40464b;
    border-radius:6px;
}
input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label {
    color:#f2f2f2;
    font-family:Arial, sans-serif;
    font-size:14px;
    line-height: 25px;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
   background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[disabled] + label span {
    display:inline-block;
    width:16px;
    height:16px;
    margin:-1px 6px 0 0;
    vertical-align:middle;
    background:#ccc left top no-repeat;
    border-radius: 3px;
    -moz-box-shadow: inset 0 0 2px #000;
    -webkit-box-shadow: inset 0 0 2px#000;
    box-shadow: inner 0 0 5px #888;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
       background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;
}

I started from this tutorial http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/

You could exclude the disabled property, set pointer-events to none and add a bit of opacity.

<input
    checked="true"
    style="pointer-events: none; opacity: 0.7"
    type="checkbox"
 />