Styling Checkbox

Make the checkbox on your form looks better:

HTML


<input type="checkbox" value="1">
<label for="00N90000008lvx1">Subscribe Me</label>

 

CSS


.checkboxoption input[type="checkbox"]{
display:none
}
.checkboxoption input[type="checkbox"]:checked + label:before {
content: "\2714";
font-weight: bold;
font-size: 24px;
line-height: 24px;
padding-top: 2px;
color: #fff;
}
.checkboxoption input[type="checkbox"]:checked label:before{
content: '';
border: 1px solid #fff;
vertical-align: middle;
width: 24px;
height: 24px;
padding: 2px;
margin-right: 10px;
text-align: center;
display: inline-flex;
align-items: center;
align-content: center;
}

Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *