I'm trying to specify an image to be used for my unchecked and checked values for html input type checkbox and radio.
I have got this:
background: url("image.png") no-repeat;
but it doesnt seem to work on radio and checkbox only button.
Does anyone know something that will work?
I have found and worked an answer. with help from these forums http://forums.digitalpoint.com/showthread.php?t=665980
all code is below: you can copy to a single file and add your own images and it will work.
<html>
<script type="text/javascript">
//global variables that can be used by ALL the function son this page.
var inputs;
var imgFalse = '52 0 ROff.png';
var imgTrue = '52 0 ROn.png';
//replace the checkbox with an image and setup events to handle it
function replaceChecks() {
//get all the input fields on the page
inputs = document.getElementsByTagName('input');
//cycle trough the input fields
for(var i=0; i<inputs.length; i++) {
//check if the input is a checkbox
if(inputs[i].getAttribute('type') == 'checkbox') {
//create a new image
var img = document.createElement('img');
//check if the checkbox is checked
if(inputs[i].checked) {
img.src = imgTrue;
} else {
img.src = imgFalse;
}
//set image ID and onclick action
img.id = 'checkImage'+i;
//set image
img.onclick = new Function('checkClick('+i+')');
//place image in front of the checkbox
inputs[i].parentNode.insertBefore(img, inputs[i]);
//hide the checkbox
inputs[i].style.display='none';
}
}
}
//change the checkbox status and the replacement image
function checkClick(i) {
if(inputs[i].checked) {
inputs[i].checked = '';
document.getElementById('checkImage'+i).src=imgFalse;
} else {
inputs[i].checked = 'checked';
document.getElementById('checkImage'+i).src=imgTrue;
}
}
</script>
</html>
<body>
<input type="checkbox" />
<script type="text/javascript">replaceChecks();</script>
</body>
Take a look at this Ryan Fait - Custom checkboxes and radio buttons ... Hope it's what you're looking for ;)
In checkbox if you want to change images or/and color then the optimized way is http://jsfiddle.net/nsoni/4cHSB/5/ here you can click either on "item name" or on "checkbox" and get the effect.
HTML:
<div class="had">
<div class="ch">
<input type="checkbox" id="sho1" name="chk1">
<div class="so"></div>
<label for="sho1">Select one</label>
</div>
<div class="ch">
<input type="checkbox" id="sho2" name="chk2">
<div class="so"></div>
<label for="sho2">Select two</label>
</div>
</div>
CSS:
input {
display: none;
}
input [type=checkbox]:checked+.so{
background-image:url('http://goo.gl/3tza1X');
background-repeat:no-repeat;background-color:green;
border-radius:50%;background-position: -2px -1px;
}
input [type=checkbox]:checked+.so+label{
color: red;
}
.so {
margin: 2px; float: left;height: 30px;width: 30px;
border: 3px solid #D8D8D8;background-color: #4679BD;
border-radius: 5px;
}
.show {
margin-left: 30px;
}
.had {
margin: 50px auto;width: 50%;border: 1px solid black;
height: 30px;padding:10px;
}
.ch {
float: left;margin-left:20px;width:40%
}
label {
height: 30px;width: 100%;position:relative;
display:block;margin-top: 5px;
}
Here is how I did it. I'm using radio input. The input boxes are hidden and the image in each label changes when the input is selected/not selected.
Jsfiddle: http://jsfiddle.net/EhDsf/
HTML:
<div class="options">
<label title="item1">
<input type="radio" name="foo" value="0" />
Item 1
<img />
</label>
<label title="item2">
<input type="radio" name="foo" value="1" />
Item 2
<img />
</label>
<label title="item3">
<input type="radio" name="foo" value="2" />
Item 3
<img />
</label>
</div>
CSS:
div.options > label > input {
visibility: hidden;
}
div.options > label {
display: block;
margin: 0 0 0 -10px;
padding: 0 0 48px 0;
height: 20px;
width: 150px;
}
div.options > label > img {
display: inline-block;
padding: 0px;
height:60px;
width:60px;
background: url(https://cdn2.iconfinder.com/data/icons/snipicons/500/thumbs-down-128.png);
background-repeat: no-repeat;
background-position:center center;
background-size:60px 60px;
}
div.options > label > input:checked +img {
background: url(https://cdn1.iconfinder.com/data/icons/onebit/PNG/onebit_34.png);
background-repeat: no-repeat;
background-position:center center;
background-size:60px 60px;
}
You cannot style checkboxes and radio buttons by pure CSS. You will need to get a JavaScript plugin (there are plenty of jQuery plugins out there) which will do this for you. Basically, it overlays another element over the default one by keeping the default element's behaviour.
