How to style a disabled checkbox?

Question

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

Answer 1

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>