How to style a disabled checkbox

Question

Do you know how I could style a checkbox when it is disabled   E g     lt input type  checkbox  value  All Terrain Vehicle         name  exfilter All Terrain Vehicle         id  exfilter All Terrain Vehicle         class  exfilter  disabled    gt

User · Answer

You can select it using css like this   input disabled       css attributes

User · Answer

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      x000D   x000D     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     x000D  input type checkbox  disabled    x000D    outline  2px solid red  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt input type  checkbox  value  tasd  disabled   gt  x000D   lt input type  text  value  text  disabled   gt  x000D   lt button gt disable enable lt  button gt  x000D   x000D   x000D

User · Answer

Checkboxes  radio buttons and  lt select gt   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

User · Answer

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

User · Answer

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    x000D   x000D  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    x000D   lt div gt  lt input id  cb1  type  checkbox  disabled checked   gt  lt label for  cb1  gt  lt  label gt  lt  div gt  x000D   lt div gt  lt input id  cb2  type  checkbox  disabled   gt  lt label for  cb2  gt  lt  label gt  lt  div gt  x000D   lt div gt  lt input id  cb3  type  checkbox  checked   gt  lt label for  cb3  gt  lt  label gt  lt  div gt  x000D   lt div gt  lt input id  cb4  type  checkbox    gt  lt label for  cb4  gt  lt  label gt  lt  div gt  x000D   x000D   x000D    Depending on your level of browser compatibility and accessibility  some additional tweaks will need to be made

User · Answer

Use the  disabled CSS3 pseudo-selector

User · Answer

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

User · Answer

This is supported by IE too   HTML  class  disabled    CSS   disabled

User · Answer

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

[html] How to style a disabled checkbox?

Examples related to html

Examples related to css