Pseudo-classes and HTML5 Forms - Learning CSS3

dabblet.css

/**
 * Pseudo-classes and HTML5 Forms - Learning CSS3
 * http://html5doctor.com/css3-pseudo-classes-and-html5-forms/
 */
body { font: 14px/1.5 Verdana,Microsoft YaHei,Ubuntu; }
textarea, input[type=text], input[type=email], input[type=number] { font-size: 13px; border: solid 1px #ABADB3; border-radius: 2px; }
input[type=number] { width: 40px; }
textarea { line-height: 1.3; pading: 5px; }
input { margin: 0 5px; }

input:required { border-width: 2px; }
input:optional { }

/* 
 * ✓ \2713
 * ✔ \2714
 * ✕ \2715 
 * ⨉ \2a09
 */
input:valid + label:after { content: "✓"; color: #060; }
input:invalid + label:after { content: "⨉"; color: #F00; }

.submited input:valid { background-color: rgba(0, 255, 0, .25); }
.submited input:invalid { background-color: rgba(255, 0, 0, .25); }

input[type=number]:in-range { color: purple; }
input[type=number]:out-of-range { color: red; }

textarea:read-write { color: lime; }
textarea:read-only { border: 1px dashed #09f; user-select: none; }

dabblet.html

<form id="form1">
    <p><label for="last_name">Last Name</label><input id="last_name" required type="text" /><label></label></p>
    <p><label for="first_name">First Name</label><input id="first_name" type="text" /><label></label></p>
    <p><label for="email">Email</label><input id="email" type="email" value="test@gmail.com" /><label></label></p>
    <p><label for="confirm_email">Confirm Email</label><input id="confirm_email" type="email" value="test" /><label></label></p>
    <p><label for="age">First Name</label><input id="age" type="number" value="151" max="150" /><label></label></p>
    <p><textarea readonly  rows="3" cols="40" >The text here is readonly and user-select: none</textarea></p>
    <p><textarea rows="3" cols="40" >Editable</textarea></p>
    <button type="submit" formnovalidate >Submit</button>
    <p><a href="javascript:">↑Top</a></p>
    <p><a href="javascript:">← Back</a></p>
    <p><a href="javascript:">⟳ Reload</a></p>
</form>
<script>
document.getElementById("form1").onsubmit = function(e) {
    e.currentTarget.classList.add("submited");
    return false;
}
</script>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}