<div class="container">
<input type="checkbox" id="checkbox-1"><label for="checkbox-1">First Item's Label</label>
<br>
<input type="checkbox" id="checkbox-2" checked><label for="checkbox-2">Second Item's Label</label>
<br>
<input type="checkbox" id="checkbox-3"><label for="checkbox-3">Third Item's Label</label>
<br>
<input type="checkbox" id="checkbox-4"><label for="checkbox-4">Fourth Item's Label</label>
<hr>
<input type="radio" id="radio-1"><label for="radio-1">First Item's Label</label>
<br>
<input type="radio" id="radio-2" checked><label for="radio-2">Second Item's Label</label>
<br>
<input type="radio" id="radio-3"><label for="radio-3">Third Item's Label</label>
<br>
<input type="radio" id="radio-4"><label for="radio-4">Fourth Item's Label</label>
<hr>
<select name="select" id="select">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three" selected>Three</option>
<option value="four">Four</option>
</select>
</div>
body {
color: #555;
font-size: 1.25em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
hr {
margin: 50px 0;
}
.container {
margin: 40px auto;
max-width: 700px;
}
input[type="checkbox"]:checked {
width: 20px;
height: 20px;
}
input[type="radio"]:checked {
width: 20px;
height: 20px;
}
select {
padding: .25em 1em;
}
option:checked {
background-color: deepPink;
color: white;
}
/* style labels */
input[type="checkbox"]:checked + label {
text-decoration: line-through;
}
input[type="radio"]:checked + label {
color: #0099CC;
}