How to gray out an html checkbox?

Question

I want to make readonly checkbox. Like this:

<input type="checkbox" onclick="return false;">

I want the checkbox to look like it is disabled or grayed out.

How can I do this?

What have you already tried yourself to do this? Please review How do I ask a good question and this Question Checklist. If you are looking for a plugin, then that is off topic for this website. If you are looking for the code or algorithm to do this, that is also off topic - this is not a coding or tutoring service, you are expected to have researched your issue and made attempts to solve it before posting a question. – — user2315153, Jul 24 '20 at 22:25

score 25 · Accepted Answer · edited Sep 03 '20 at 00:48

25

You need to disable the checkbox also:

<input type="checkbox" onclick="return false;" disabled="disabled">

To post the value, simply make it readonly instead:

<input type="checkbox" onclick="return false;" readonly="readonly">

You can style checkbox label and readonly inputs with CSS, e.g.: input [readonly="readonly"] {} but the browser should make the checkbox should appear greyed out when set to readonly.

Updated:

You are at the the mercy of the browser when styling checkboxes & to style them consistently across all browsers, you have to resort to images e.g.: https://archive.is/TNUH1

If you don't want to do this (and it seems like a longwinded solution), the simplest solution is to disable the checkbox so it appears correctly, and post the value as a hidden input e.g.:

<input type="checkbox" onclick="return false;" disabled="disabled">
<input type="hidden" name="checkboxval" value="111" />

edited Sep 03 '20 at 00:48

desbest

4,746
11
51
84

answered May 21 '12 at 12:14

FluffyKitten

13,824
10
39
52

color: #aaaaaa; - Yes. I need something like this. But actually this not change appearence anyhow – Roman May 21 '12 at 12:25
@Roman what browser are you using? The checkbox itself should appear greyed out just by setting the readonly attribute. If you want the label greyed out, set the css. See this:http://jsfiddle.net/Btvpq/ – FluffyKitten May 21 '12 at 12:32
"checkbox itself should appear greyed out just by setting the readonly attribute" - Tried in IE8, FF12.0, Chrome. Only works in Chrome. – Roman May 21 '12 at 12:46
I'm afraid when it comes to checkboxes you're at the mercy of the broswer to style its appearance - some allow you change it whereas others don't. The only sure cross-browser way is to use images, e.g. http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ – FluffyKitten May 21 '12 at 12:52
@Roman I've updated my post with a simpler alternative to trying to style checkboxes consistently, I think this is the better solution for what you require - simple, effective and achieves exactly what you require without trying to style checkboxes cross-browser – FluffyKitten May 21 '12 at 12:57
You can't style a checkbox directly, but you can apply a css filter to it `filter: invert(25%);` [Source](http://stackoverflow.com/a/4271643/456550) – Christian Long Mar 30 '17 at 18:46
1

@ChristianLong Yes that is a possible solution now (it wasn't 5 years ago). However its important to note css filters aren't supported in older browsers including IE11 – FluffyKitten Mar 31 '17 at 19:50
The link is broken, please remove – Archmede Jun 04 '19 at 15:45
this CSS filter looks better to have it actually look grayed out `filter: grayscale(100%) brightness(1.7);` – veritaS Aug 19 '20 at 11:57

score 8 · Answer 2 · answered Mar 30 '17 at 18:52

8

Simple, css-only way to gray-out a disabled checkbox.

input[type=checkbox][disabled] {
    filter: invert(25%);
}

answered Mar 30 '17 at 18:52

Christian Long

10,385
6
60
58

4

Yes that is a possible solution now (it wasn't when this was asked 5 years ago). However its important to note that css filters aren't supported in IE11 – FluffyKitten Mar 31 '17 at 19:50

score 6 · Answer 3 · answered May 21 '12 at 12:14

6

simply add the 'disabled' attribute on checkbox like this

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

answered May 21 '12 at 12:14

Talha

18,898
8
49
66

Fabrizio Calderan · Answer 4 · 2022-09-30T15:43:23.473

6

input.readonly {
   opacity: .5;
   cursor: default;
   pointer-events: none;
   
}

<input type="checkbox"> <br />
<input type="checkbox" class="readonly">

Add a class readonly to the element you want to grayout: via css you set an opacity and change the style of cursor. pointer-events: none will prevent any click event, so JS is not necessary.

edited Sep 30 '22 at 15:43

answered May 21 '12 at 12:15

Fabrizio Calderan

120,726
26
164
177

This will work, but a pure HTML solution is easier and preferable - no requirement for javascript support – FluffyKitten May 21 '12 at 12:17
@FluffyKitten , js part is functionally identical to OP code, but without inline javascript. – Fabrizio Calderan May 21 '12 at 12:18
sorry I thought was not necessary add `filter` in this example :) , answer updated, thank you @Roman – Fabrizio Calderan May 21 '12 at 12:28
Ok, thank you. It is something near to that appearence that I want, but still doesn't look like really disabled checkbox :) May be another workaround is available? – Roman May 21 '12 at 12:42
@Roman as I commented above, the readonly checkbox should appear greyed out - what browser are you using that its not working? Or do you mean you want the label greyed out? See my jsfiddle above & tell us what's not working for you – FluffyKitten May 21 '12 at 12:45

How to gray out an html checkbox?

4 Answers4