CodeHQ

Posts Tagged ‘Checkbox’

|

Pure CSS Checkbox Image replacement

Friday, March 27th, 2015

Use this method for replacing a standard checkbox input with an image or styled box.

The markup

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>

The CSS

input[type=checkbox] {
    display:none;
}
input[type=checkbox] + label {
    background: #999; //colour or image
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label {
    background: #0080FF; //colour or image
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

Tags: , ,
Posted in CSS | No Comments »