How to set CSS for disabled checkboxes?

Question

I'd like change the CSS for disabled checkboxes in a grid (they are too hard to see for the users). What is a simple way to do this?

My preference in technologies used (in descending order):
CSS
JavaScript
jQuery
Other

Answer 1

I'd suggest changing the colour of the background (the background-color of the form/fieldset), and see if you can come up with a better contrast. If you just want to change the colour of disabled (non-selectable?) checkboxes you can try:

input[disabled] {
...
/* CSS here */
...
}

But if they're disabled for a reason, surely they don't need to be prominently visible? The aim for their being greyed-out is, surely, to avoid confusion between active/enabled and inactive/disabled form elements?

Answer 2

Keep the checkbox enabled, but then add onfocus=this.blur() to the checkbox so it cannot be clicked.

Or if using ASP.net (as you say in your comment) keep the checkbox set to enabled and add the following to the Page.Load event:

CheckBox1.Attributes.Add("onclick", "return false;");

Answer 3

Ive had good luck with a few JS libraries to do the work. Granted my requirement was to make the boxes look very different from the standard check box. The following library is even 508 compliant.

Styled Form Controls

Answer 4

input:disabled {} works for every browser except—you guessed it—IE. For IE, I guess you'll have to use some JS library.

Answer 5

basically, you need to attach onclick event on div, p, or any other element used for a grid and then transfer the checked value into hidden element associated with that field in a grid. which is very trivial, if javascript is used - check jquery to add onclick event on any element. if clicked, set value=1 for hidden element.

Answer 6

Actually with a bit CSS3 you can mock up a very simplistic solution. You will always have to consider what kind of support you want to offer. But if you are fine with it working on modern browsers, just give it a go.

Here's the HTML

<label>
    <input type="checkbox" name="test" />
    <span>I accept terms and cons</span><br><br>
    <button>Great!</button>
</label>

Here's the CSS

button { display: none}
:checked ~ button {
    font-style: italic;
    color: green;  
    display: inherit;
}

And here's the DEMO http://jsfiddle.net/DyjmM/

Answer 7

If you have a form with a mix of enabled and disabled checkboxes, having the disabled checkboxes faded out avoids confusion for the user. If the intention is to display a view-only page with checkboxes (ex. to show product options selected on a purchase receipt) then replacing checkbox input elements with images may render better results.

Replace

<input type="checkbox" disabled>
<input type="checkbox" disabled checked>

with

<img src="unchecked.gif">
<img src="checked.gif">