Hi, I am trying to put image on the checkbox when it is checked,so that the default check mark will be replaced with my png image.but i could not achieve it,
can anyone help me out here.
<div>
<label><input type="checkbox"></label>
</div>
input[type="checkbox]:checked{
bacground: url('mycheck.png') no-repeat scroll 0 0 transparent;
}
Thank you in advance.
Don’t know if this is a typo or not, but the word “background” is misspelled in the code posted.
Hi, Sorry for that,my bad it should be
input[type="checkbox]:checked{
background: url('mycheck.png') no-repeat scroll 0 0 transparent;
}
another typo is that you didnt close the quotes around “checkbox”.
Still, you are going about it the wrong way. unfortunately, styling actual inputs is difficult if not impossible. the trick is to style an adjacent element, usually a label and cover up the check box.
here is a quick demo:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
div{position: relative;}
input[type="checkbox"], input[type="checkbox"]+label {vertical-align: middle; display:inline-block;}
input[type="checkbox"]:checked+label:before{
background: red;
}
input[type="checkbox"]+label:before{
background: pink;
content:'';
height:1em;
width:1em;
position: absolute;
left:0;
}
</style>
</head>
<body>
<div><input type="checkbox" id="some-name"> <label for="some-name">Check-it</label></div>
</body>
</html>
if you wanted to house the input inside the label then you would need an additional tag
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
label{position: relative;}
input[type="checkbox"], input[type="checkbox"]+span {vertical-align: middle; display:inline-block;}
input[type="checkbox"]:checked+span:before{
background: red;
}
input[type="checkbox"]+span:before{
background: pink;
content:'';
height:1em;
width:1em;
position: absolute;
left:0;
}
</style>
</head>
<body>
<div><label for="some-name"><input type="checkbox" id="some-name"> <span>Click-it!</span></label></div>
</body>
</html>
hope that helps
Hi, it’s amazing…thank you for this…by the way is it possible to make my checkbox bigger, I mean to increase the height,I tried but i failed to achieve…
Thank you again 
to make the actual ckeck box bigger, you need to change the display type of the input first.
For example, style the input[type=‘checkbox’] {display: inline-block; height 100px; width:100px} ( float , and display:block should also work, but they each have their own side effects)
Hi Paul O’B,wow thank you for this link it is also nice, i never found this article before when i googling.
Thank you again it’s working now:)