CSS checkbox input styling

Question

Any style for input affects every input element  Is there a way to specify styling to apply for only checkboxes without applying a class to each check box element

User · Answer

Something I recently discovered for styling Radio Buttons AND Checkboxes. Before, I had to use jQuery and other things. But this is stupidly simple.

input[type=radio] {
    padding-left:5px;
    padding-right:5px;
    border-radius:15px;

    -webkit-appearance:button;

    border: double 2px #00F;

    background-color:#0b0095;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=radio]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

input[type=radio]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

You can do the same for a checkbox, obviously change the input[type=radio] to input[type=checkbox] and change border-radius:15px; to border-radius:4px;.

Hope this is somewhat useful to you.

User · Answer

I create my own solution without label   x000D   x000D  input type checkbox    x000D           position  relative  x000D          cursor  pointer  x000D        x000D      input type checkbox  before   x000D           content      x000D           display  block  x000D           position  absolute  x000D           width  16px  x000D           height  16px  x000D           top  0  x000D           left  0  x000D           border  2px solid  555555  x000D           border-radius  3px  x000D           background-color  white  x000D    x000D      input type checkbox  checked after   x000D           content      x000D           display  block  x000D           width  5px  x000D           height  10px  x000D           border  solid black  x000D           border-width  0 2px 2px 0  x000D           -webkit-transform  rotate 45deg   x000D           -ms-transform  rotate 45deg   x000D           transform  rotate 45deg   x000D           position  absolute  x000D           top  2px  x000D           left  6px  x000D    x000D   lt input type  checkbox  name  a  gt  x000D   lt input type  checkbox  name  a  gt  x000D   lt input type  checkbox  name  a  gt  x000D   lt input type  checkbox  name  a  gt  x000D   x000D   x000D     x000D   x000D  input type checkbox    x000D           position  relative  x000D          cursor  pointer  x000D        x000D      input type checkbox  before   x000D           content      x000D           display  block  x000D           position  absolute  x000D           width  20px  x000D           height  20px  x000D           top  0  x000D           left  0  x000D           background-color  e9e9e9  x000D    x000D  input type checkbox  checked before   x000D           content      x000D           display  block  x000D           position  absolute  x000D           width  20px  x000D           height  20px  x000D           top  0  x000D           left  0  x000D           background-color  1E80EF  x000D    x000D      input type checkbox  checked after   x000D           content      x000D           display  block  x000D           width  5px  x000D           height  10px  x000D           border  solid white  x000D           border-width  0 2px 2px 0  x000D           -webkit-transform  rotate 45deg   x000D           -ms-transform  rotate 45deg   x000D           transform  rotate 45deg   x000D           position  absolute  x000D           top  2px  x000D           left  6px  x000D    x000D   lt input type  checkbox  name  a  gt  x000D   lt input type  checkbox  name  a  gt  x000D   lt input type  checkbox  name  a  gt  x000D   lt input type  checkbox  name  a  gt  x000D   x000D   x000D

User · Answer

As IE6 doesn t understand attribute selectors  you can combine a script only seen by IE6  with conditional comments  and jQuery or IE7 js by Dean Edwards      IE7  js  is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser  It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6     The choice of using classes or jQuery or IE7 js depends on your likes and dislikes and your other needs  maybe PNG-24 transparency throughout your site without having to rely on PNG-8 with complete transparency that fallbacks to 1-bit transparency on IE6 - only created by Fireworks and pngnq  etc

User · Answer

Although CSS does provide a way for you to do the style specific to the checkbox type or another type  there are going to be problems with browsers that do not support this   I think your only option in this case is going to be to apply classes to your checkboxes   just add the class  checkbox  to your checkboxes   Then create that style in your css code   One thing you could do is this   main css  input type  checkbox        css code here        ie css   checkbox     css code here for ie        Then use the IE specific css include    lt  -- if lt IE 7  gt      lt link rel  stylesheet  type  text css  href  ie css    gt   lt   endif -- gt    You will still need to add the class for it to work in IE  and it will not work in other non-IE browsers that do not support IE  But it will make your website forward-thinking with css code and as IE gets support  you will be able to remove the ie specific css code and also the css classes from the checkboxes

User · Answer

Trident provides the   -ms-check pseudo-element for checkbox and radio button controls  For example    lt input type  checkbox  gt   lt input type  radio  gt     -ms-check       color  red      background  black      padding  1em      This displays as follows in IE10 on Windows 8

User · Answer

input type  checkbox         your style        But this will only work for browsers except IE7 and below  for those you will have to use a class

User · Answer

Classes also work well  such as    lt style gt    form input  checkbox            your checkbox styling         lt  style gt    lt form gt     lt input class  checkbox  type  checkbox    gt   lt  form gt

User · Answer

With CSS 2 you can do this   input type  checkbox             This should be pretty widely supported by now  See support for browsers

User · Answer

You can apply only to certain attribute by doing   input type  checkbox           It explains it here

[css] CSS checkbox input styling

Examples related to css