51

Do you know how I could style a checkbox when it is disabled?

E.g.:

<input type="checkbox" value="All Terrain Vehicle"
       name="exfilter_All Terrain Vehicle"
       id="exfilter_All_Terrain_Vehicle"
       class="exfilter" disabled="">
Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
Ozzy
  • 877
  • 3
  • 12
  • 17

11 Answers11

59

Use the attribute selector in the css

input[disabled]{
  outline:1px solid red; // or whatever
}

for checkbox exclusively use

input[type=checkbox][disabled]{
  outline:1px solid red; // or whatever
}


$('button').click(function() {
  const i = $('input');

  if (i.is('[disabled]'))
    i.attr('disabled', false)
  else
    i.attr('disabled', true);
})
input[type=checkbox][disabled] {
  outline: 2px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="tasd" disabled />
<input type="text" value="text" disabled />
<button>disable/enable</button>
dota2pro
  • 7,220
  • 7
  • 44
  • 79
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • @RayL. Seems to work just fine in all browsers... check out the example in my answer.. – Gabriele Petrioli Jun 29 '12 at 14:31
  • Other than the outline attribute, it doesn't look like any attributes of the checkbox can be styled. – Alex Reynolds Oct 08 '15 at 18:31
  • 9
    You can't style a checkbox directly, but you can apply a css filter to it `filter: invert(25%);` [Source](http://stackoverflow.com/a/38568254/456550) – Christian Long Mar 30 '17 at 18:44
  • 1
    I don't know if this is a behavior that has changed in the last decade, but currently, none of this has ANY effect. The browser up and decides what a checkbox should look like, and Lord help you if you want something different. – Martha Mar 16 '22 at 20:37
  • Yeah same... I am not able to style a checkbox using input:disabled or input[disabled] and yet so many answers are saying it is possible. – Code Novice Mar 15 '23 at 21:40
22

You can't style a disabled checkbox directly because it's controlled by the browser / OS.

However you can be clever and replace the checkbox with a label that simulates a checkbox using pure CSS. You need to have an adjacent label that you can use to style a new "pseudo checkbox". Essentially you're completely redrawing the thing but it gives you complete control over how it looks in any state.

I've thrown up a basic example so that you can see it in action: http://jsfiddle.net/JohnSReid/pr9Lx5th/3/

Here's the sample:

input[type="checkbox"] {
    display: none;
}

label:before {
    background: linear-gradient(to bottom, #fff 0px, #e6e6e6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #035f8f;
    height: 36px;
    width: 36px;
    display: block;
    cursor: pointer;
}
input[type="checkbox"] + label:before {
    content: '';
    background: linear-gradient(to bottom, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: #3d9000;
    color: #96be0a;
    font-size: 38px;
    line-height: 35px;
    text-align: center;
}

input[type="checkbox"]:disabled + label:before {
    border-color: #eee;
    color: #ccc;
    background: linear-gradient(to top, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

input[type="checkbox"]:checked + label:before {
    content: '✓';
}
<div><input id="cb1" type="checkbox" disabled checked /><label for="cb1"></label></div>
<div><input id="cb2" type="checkbox" disabled /><label for="cb2"></label></div>
<div><input id="cb3" type="checkbox" checked /><label for="cb3"></label></div>
<div><input id="cb4" type="checkbox" /><label for="cb4"></label></div>

Depending on your level of browser compatibility and accessibility, some additional tweaks will need to be made.

John Reid
  • 1,155
  • 10
  • 19
13

Use the :disabled CSS3 pseudo-selector

Adam
  • 43,763
  • 16
  • 104
  • 144
9

You can select it using css like this:

input[disabled] { /* css attributes */ }
Vlad
  • 314
  • 1
  • 11
  • 3
    +1 for being the most cross-browser friendly. But I would make it `input[disabled]` so that it only checks for the disabled attribute's existence. – stevelove Nov 24 '10 at 21:14
7

Checkboxes (radio buttons and <select>) are OS-level components, not browser-level. You cannot reliably style them in a manner that will be consistent across browsers and operating systems.

Your best bet it to put an overlay on top and style that instead.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
4

Use CSS's :disabled selector (for CSS3):

checkbox-style { }
checkbox-style:disabled { }

Or you need to use javascript to alter the style based on when you enable/disable it (Assuming it is being enabled/disabled based on your question).

Brad Christie
  • 100,477
  • 16
  • 156
  • 200
2
input[type='checkbox'][disabled][checked] {
width:0px; height:0px;
}
input[type='checkbox'][disabled][checked]:after {
 content:'\e013'; position:absolute; 
 margin-top:-10px;
 opacity: 1 !important;
 margin-left:-5px;
 font-family: 'Glyphicons Halflings';
 font-style: normal;
 font-weight: normal;
}
minto antony
  • 29
  • 1
2

If you're trying to stop someone from updating the checkbox so it appears disabled then just use JQuery

$('input[type=checkbox]').click(false);

You can then style the checkbox.

MDC
  • 175
  • 1
  • 12
2

do not put disabled in the input and apply the following styles

input[type="checkbox"] {
  pointer-events: none;
}
Republic2602
  • 21
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 26 '22 at 03:03
  • it's a great solution here, allows customizing the disabled checkbox as easily as enabled one. – PetoMPP Oct 12 '22 at 10:47
0

This is supported by IE too:

HTML

class="disabled"

CSS

.disabled{
...
}
0

In case if you really want to add some colors to a checkbox, try this workaround.

input[type=checkbox][disabled] {
  outline: 5px solid red;
  outline-offset: -20px;
}
Tharuka Nimesha
  • 1
  • 1