The default style of the input check box checkbox is pure css modification, inputcheckbox

The default style of the input check box checkbox is pure css modification, inputcheckbox

Modify the previous Style

Modified Style

Html

<Input type = "checkbox" name = "btn" id = "btn1"> <label for = "btn1"> button 1 </label>

Css

Input [type = "checkbox"] {width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 18px; position: relative;} input [type = "checkbox"]: before {content: ""; position: absolute; top: 0; left: 0; background: # fff; width: 100%; height: 100%; border: 1px solid # d9d9d9} input [type = "checkbox"]: checked: before {content: "\ 2713 "; background-color: # fff; position: absolute; top: 0; left: 0; width: 100%; border: 1px solid # e50232; color: # e50232; font-size: 20px; font-weight: bold ;}

"\ 2713" entity symbol √. Click here if you are interested in viewing the entity symbol details.

You can modify the border-color and color in input [type = "checkbox"]: checked: before.