I want to create a checkbox like this. with a white tick and transparent background. Can someone help me on how to do it
I tried
input[type="checkbox"]{
background-color:rgba(255,255,255,0.1);
color:white;
}
But doesnt work as in this
codepen
-
1Have you read the answers at stackoverflow.com/questions/4148499/…?Chris Lear– Chris Lear2017-06-08 11:57:37 +00:00Commented Jun 8, 2017 at 11:57
-
2Possible duplicate of How to style checkbox using CSS?epoch– epoch2017-06-08 11:59:22 +00:00Commented Jun 8, 2017 at 11:59
-
check my answer..LKG– LKG2017-06-08 12:14:00 +00:00Commented Jun 8, 2017 at 12:14
Add a comment
|
3 Answers
you can use below css to get the same
input[type="checkbox"].hidden {
display: none;
}
.demoCheck {
border: 1px solid #ddd;
width: 25px;
height: 25px;
display: block;
}
input[type="checkbox"]:checked.hidden + label {
background: url(http://www.clipartsfree.net/vector/small/23493485345_Clipart_Free.png) center center no-repeat;
background-size:cover;
}<input type="checkbox" class="hidden" id="demo" >
<label for="demo" class="demoCheck demoCheckLabel"></label>
1 Comment
R. Mani Selvam
Thank you so much. Made a pic for the tick as u suggested. Works perfectly now :)
On Chrome, you'll need to overwrite the default browser settings like this.
input[type="checkbox"]{
-webkit-appearance: none;
}
Here's a similar JS fiddle I made that might help you out.
4 Comments
Polymer
May want to add the other browser compatible ones too.
-webkit-appearance: none; -moz-appearance: none; appearance: none;
alex
Good shout @Polymer :)
R. Mani Selvam
I've tried this. Couldn't get the default tick in the place of content. Unicode \2713 gives a curved one
alex
Try a san-serif font, or consider using an image/icon. You can achieve this with an
:after command- please see this
HTML
<div>
<input id="option" type="checkbox" name="field" value="option">
<label for="option"><span><span></span></span>Value</label>
</div>
CSS
input[type=checkbox]:not(old),
input[type=radio ]:not(old){
width : 2em;
margin : 0;
padding : 0;
font-size : 1em;
opacity : 0;
}
input[type=checkbox]:not(old) + label,
input[type=radio ]:not(old) + label{
display : inline-block;
margin-left : -2em;
line-height : 1.5em;
}
input[type=checkbox]:not(old) + label > span,
input[type=radio ]:not(old) + label > span{
display : inline-block;
width : 0.875em;
height : 0.875em;
margin : 0.25em 0.5em 0.25em 0.25em;
border : 0.0625em solid rgb(192,192,192);
border-radius : 0.25em;
background : rgb(224,224,224);
background-image : -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : linear-gradient(rgb(240,240,240),rgb(224,224,224));
vertical-align : bottom;
}
input[type=checkbox]:not(old):checked + label > span,
input[type=radio ]:not(old):checked + label > span{
background-image : -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : linear-gradient(rgb(224,224,224),rgb(240,240,240));
}
input[type=checkbox]:not(old):checked + label > span:before{
content : '✓';
display : block;
width : 1em;
color : rgb(153,204,102);
font-size : 0.875em;
line-height : 1em;
text-align : center;
text-shadow : 0 0 0.0714em rgb(115,153,77);
font-weight : bold;
}
- Also check out here
