<div class="container">
<form action="#">
<input type="submit" value="Submit (<input>)">
<input type="submit" value="Submit (<input>)">
<br>
<input type="checkbox" id="checkbox-1"><label for="checkbox-1">First Choice</label>
<br>
<input type="checkbox" id="checkbox-2" checked><label for="checkbox-2">Second Choice; if your browser supports <code>:default</code>, this label should be underlined</label>
<br>
<input type="checkbox" id="checkbox-3"><label for="checkbox-3">Third Choice</label>
<br>
<input type="checkbox" id="checkbox-4"><label for="checkbox-4">Fourth Choice</label>
<br>
<br>
<input type="radio" id="radio-1"><label for="radio-1">First Choice</label>
<br>
<input type="radio" id="radio-2" checked><label for="radio-2">Second Choice; if your browser supports <code>:default</code>, this label should be underlined</label>
<br>
<input type="radio" id="radio-3"><label for="radio-3">Third Choice</label>
<br>
<input type="radio" id="radio-4"><label for="radio-4">Fourth Choice</label>
<br>
<br>
<button type="submit">Submit <Button></button>
<button type="submit">Submit <Button></button>
<button type="button">"Button" button</button>
</form>
</div>
body {
color: #555;
font-size: 1.25em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
margin: 40px auto;
max-width: 700px;
}
button {
padding: .5em 1.5em;
margin: 1em;
border: 1px solid black;
border-radius: 3px;
color: white;
background-color: #111;
cursor: pointer;
font-size: 1em;
}
button[type=submit]:default {
border: 3px dotted #0099CC;
}
button:default {
border: 3px dotted #0099CC;
}
input[type=submit] {
padding: .5em 1em;
font-size: 1em;
width: 200px;
margin-bottom: 1em;
}
input[type=submit]:default {
border: 3px dotted #0099CC;
}
input[type="checkbox"]:default + label {
text-decoration: underline;
}
input[type="radio"]:default + label {
text-decoration: underline;
}