Create your own style of Checkbox using css3

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;

here it is the appearance:



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s