CODEWITHSUNDEEP
htmlcsscheckbox
Even Mien
Even Mien

Reputation: 45898

How to set CSS for disabled checkboxes?

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

Upvotes: 9

Views: 39288

Answers (8)

SendETHToThisAddress
SendETHToThisAddress

Reputation: 3704

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.

enter image description here 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.

Upvotes: 0

2682562
2682562

Reputation: 139

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/

Upvotes: 0

Zeeb
Zeeb

Reputation: 29

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

Upvotes: -1

David Thomas
David Thomas

Reputation: 253328

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?

Upvotes: 8

David
David

Reputation: 430

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

Upvotes: 4

Ms2ger
Ms2ger

Reputation: 15983

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

Upvotes: 2

dusoft
dusoft

Reputation: 11469

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.

Upvotes: 0

AdamSane
AdamSane

Reputation: 2882

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

Upvotes: 3

Related Questions