here it is my html
<input class=”purchase-list-item” name=”{{item}}” id=”{{item}}” type=”checkbox” value=””>
<label for=”{{item}}”></label>
for style it we first make the default input set it display none, then we change the style of it along with the label. here is the css:
input.purchase-list-item[type="checkbox"] {
display: none;
}
input.purchase-list-item[type="checkbox"] + label:before {
border: 1px solid #3C3E40;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 16px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 16px;
}
input.purchase-list-item[type="checkbox"]:checked + label:before {
/*background: #3C3E40;*/
color: #3C3E40;
content: "\2713";
text-align: center;
font-weight:bold;
}
here it is the appearance:
Advertisements