Good day. There is a checkbox inside the label . The label stroke and background color is white. The checkbox itself is moved to the left by -10000px . When hover on the label we change the background color.

The question is how to make the background color change and turn white when you click on the label . Those. before pressing white, and when pressed, for example, blue.

An example of the code that is now is presented below.

 label { display: inline-table; border: 2px solid #00BCD4; border-radius: 5px; padding: 5px; margin: 5px; text-align: center; } input[type="checkbox"] { position: absolute; left: -10000px; } label:hover { background: #00BCD4; cursor: pointer; } 
 <label><input type="checkbox" name="test" value="12">12</label>

Only one option comes to my mind - js. It is also worth saying that separating a label from a checkbox not desirable.

    1 answer 1

    Make a wrapper inside the label

    For example, so

     label { display: inline-table; margin: 5px; text-align: center; } label span { display: block; padding: 5px; border: 2px solid #00BCD4; border-radius: 5px; } input[type="checkbox"] { position: absolute; left: -10000px; } label:hover span { background: #00BCD4; cursor: pointer; } input[type="checkbox"]:checked+span { color: #fff; background: #00BCD4; } 
     <label><input type="checkbox" name="test" value="12"><span>12</span></label>