<div class="form-check">
<label>
<input name="ovcheck[]" value="314" checked="" type="checkbox"> <span class="label-text">Dub Sonoma</span>
</label>
</div>
CSS
/*Check box*/
input[type="checkbox"], input[type="radio"]{
position: absolute;
right: 9000px;
}
input[type="checkbox"] + .label-text:before{
content: "\f096";
font-family: "FontAwesome";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing:antialiased;
width: 1em;
display: inline-block;
margin-right: 5px;
}
input[type="checkbox"]:checked + .label-text:before{
content: "\f14a";
color: #2980b9;
animation: effect 250ms ease-in;
}
input[type="checkbox"]:disabled + .label-text{
color: #aaa;
}
input[type="checkbox"]:disabled + .label-text:before{
content: "\f0c8";
color: #ccc;
}
.form-check > label{
position: relative;
cursor: pointer;
/* color: #666; */
font-size: 16px;
font-weight: normal!important;
}
@keyframes effect{
0%{transform: scale(0);}
25%{transform: scale(1.3);}
75%{transform: scale(1.4);}
100%{transform: scale(1);}
}