[html] How to style a disabled checkbox?

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

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;
}

This is supported by IE too:

HTML

class="disabled"

CSS

.disabled{
...
}

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() {_x000D_
  const i = $('input');_x000D_
_x000D_
  if (i.is('[disabled]'))_x000D_
    i.attr('disabled', false)_x000D_
  else_x000D_
    i.attr('disabled', true);_x000D_
})

input[type=checkbox][disabled] {_x000D_
  outline: 2px solid red;_x000D_
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<input type="checkbox" value="tasd" disabled />_x000D_
<input type="text" value="text" disabled />_x000D_
<button>disable/enable</button>

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.

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

<div><input id="cb1" type="checkbox" disabled checked /><label for="cb1"></label></div>_x000D_
<div><input id="cb2" type="checkbox" disabled /><label for="cb2"></label></div>_x000D_
<div><input id="cb3" type="checkbox" checked /><label for="cb3"></label></div>_x000D_
<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.

You can select it using css like this:

input[disabled] { /* css attributes */ }

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.

Use the :disabled CSS3 pseudo-selector

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).