<form>
<input id="1" type="checkbox"><label for="1">Eat breakfast</label><br>
<input id="2" type="checkbox"><label for="2">Clean car</label><br>
<input id="3" type="checkbox" checked><label for="3">Grocery shopping</label><br>
<input id="4" type="checkbox" checked><label for="4">Play games</label><br>
<input id="5" type="checkbox" checked><label for="5">Take a nap</label><br>
<input id="6" type="checkbox"><label for="6">Do some work</label><br>
<button type="reset" value="Reset">Reset</button>
</form>
body {
font-family: arial;
}
button {
margin-left: 3px;
margin-top: 5px;
padding: 5px 10px;
}
form {
margin: 30px;
}
input[type=checkbox] {
margin-bottom: 15px;
margin-right: 5px;
}
form input:default + label {
font-weight: bold;
}
form input:default + label:after {
content: " (default)";
font-style: italic;
font-weight: normal;
color: #000;
font-size: 0.8em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.