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

Hammonds

please be more descriptive, do you require javascript solution? – Motorman

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?

Joubert

We couldn't do this in CSS, since our user base is using IE. We did this programmatically on the checkbox controls in .NET, however. – Hammonds

@Even Mien: It would be nice if you said how you did this, i.e. what attribute you set. – Bossy

@Christopher see my answer below for the ASP.Net code to do this. – Longwood

I believe the more correct way is input[disabled="disabled"]{} – Terefah

@Duncan: in XHTML, yes; but in html I'm still wrong...sigh. Two minutes, and I'll edit. =/ The mere presence of the attribute is sufficient (since its presence is enough, in most cases, to represent the element being disabled). Thanks for the catch, though; I'd never have come back to this had you not commented. :) – Joubert

@DavidsaysreinstateMonica: "But if they're disabled for a reason, surely they don't need to be prominently visible?" When you would like to give the user a sense of progress of completion of tasks where the completion of the task involves something other than the user manually checking the box and when you would like to do this using value binding to a state object with a javascript framework, it seems to be a valid time to be able to customize the look of the disabled checkbox. Obviously there are other ways to accomplish this, but I like the idea of using the check input. – Hatching

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;");

Longwood

@Blue Steel: As per question user has asked for CSS solution - "How to set CSS for disabled checkboxes?" – Lout

@IT ppl: He changed his requirements in a comment above saying he could not use CSS but needed to do it programmatically. He also mentions that he is using an ASP.Net checkbox. – Longwood

I'm glad that you managed to reply somehow after so long time. – Lout

@IT ppl: Haha! I just got an email notification about your comment yesterday! It looks like the notification system malfunctioned or something. – Longwood

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

Heteronomous

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.

Trella

Yeah, I definitely need IE as that's 100% of my user base. – Hammonds

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.

Motorman

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/

Zingaro

While it's really cool, it's not relevant to the question here. He was asking how to change the look of disabled checkbox, and this post does not address that at all. – Tail

that's very kind of you! – Zingaro

Answer 7

Solution for green checkbox in Edge

I wanted to style a disabled checkbox to be green and have it work in Edge browser. I tried all of the solutions posted and none of them worked for me, probably because the Edge browser overrides whatever styling you put in for a disabled checkbox. I found a workaround though that has the same effect/appearance as a disabled checkbox. Since Edge will only allow styling on an enabled checkbox, I removed the disabled attribute, set Accent-color to green, then added an onclick function that simply sets the control back to checked.

CSS

input[type="checkbox"] {
    Accent-color: green
}

HTML

<input type='checkbox' checked id="checkbox-1" onclick="keepCheckboxGreen('checkbox-1')">

JavaScript

function keepCheckboxGreen(id) {
    var checkbox = document.getElementById(id);
    checkbox.checked = true;
}

So in this way you can apply any styling you want and clicking is of no effect.

Alcoholism

Answer 8

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">

Valenba