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=".9.1.min.js"></script>
<script type="text/javascript" src=" .10.2/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="+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>
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./jquery-1.9.1.min.js"></script>
<script type="text/javascript" src=" http://code.jquery./ui/1.10.2/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis./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>
- 2 No, its impossible. But you can use image on checkbox to simulate other design – Piotr Wu Commented Dec 2, 2013 at 23:29
- 2 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: stackoverflow./questions/3772273/… – Dryden Long Commented Dec 2, 2013 at 23:39
1 Answer
Reset to default 4This is what i use for "styling" checkboxes : http://jsfiddle/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.