How to change the color of the checkbox (tickbox) from white to black?

Question

I want to change my checkbox color white to black and color of my tick black to white.Wnat to know is it possible ?

I tried background color and color property it is not working.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src=" http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
      <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Serif:700normal"/>
<title>Untitled Document</title>
<script>
function statecheck(layer) {
var myLayer = document.getElementById(layer);
 if(myLayer.checked = true){
 myLayer.style.color = "#bff0a1";
 } else {
 myLayer.style.backgroundColor = "#eee";
 };
}
</script>
label {
margin:0px 2px 4px 2px; 
padding: 1px;
background-color: #eee;
display: block;
width: 50px;
}
</head>

<body>
<form action="" method="get">
<label title="Alabama" id="Alabama"><input type="checkbox" value="checkbox" onchange="statecheck('Alabama')" />AL</label>
<label title="Alaska" id="Alaska"><input type="checkbox" value="checkbox" onchange="statecheck('Alaska')" />AK</label>
<label title="American Samoa" id="AmericanSamoa"><input type="checkbox" value="checkbox" onchange="statecheck('AmericanSamoa')" />AS</label>
</form>
</body>
</html>

No, its impossible. But you can use image on checkbox to simulate other design — Piotr Wu, Dec 02 '13 at 23:29
Like Piotr said, you cannot do this directly, but you can replace the checkbox with a set of on/off images to achieve the effect you are looking for. See this SO question for details on how to do it: http://stackoverflow.com/questions/3772273/pure-css-checkbox-image-replacement — Dryden Long, Dec 02 '13 at 23:39

score 4 · Answer 1 · answered Dec 03 '13 at 05:02

This is what i use for "styling" checkboxes : http://jsfiddle.net/D8daE/1/

HTML:

       <input type="checkbox" id="check1" class="checkbox"><label for="check1"> Example</label>

Css:

   input[type="checkbox"]{
   margin-left: 10px;
   display: none;  

      }

    label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 17px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: black;
    border-radius: 3px;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
  }

   label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 40px;
    margin-right: 15px;
    font-size: 15px;
  }
      .checkbox label {
    margin-bottom: 10px;
    }

       .checkbox label:before {  
            border-radius: 3px;  
    }  

     input[type="checkbox"]:checked + label:before {  
       content: "\2713";  
       text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
       font-size: 15px;  
       color: white;
       text-align: center;  
       line-height: 15px;  
      }

It doesn't style the checkbox itself instead it modifies the label of the checkbox. In order to change the color of the box set the label:before background to what color you want and in order to modify the tick set the color of the "input[type="checkbox"]:checked + label:before" to whatever color you need.

Ps. It is pure css.

How to change the color of the checkbox (tickbox) from white to black?

1 Answers1