CSS3 Form Input Selectors

by Joshua McNeese

HTML

<link rel="stylesheet" href="http://dryan.com/css3/css/html5-reset.css">
<fieldset>
    <legend>Personal</legend>
    <ol>
        <li>
            <label for="first_name">First Name</label>
            <input type="text" required name="first_name" autofocus tabindex="1" />
        </li>
        <li>
            <label for="last_name">Last Name</label>
            <input type="text" required name="last_name" tabindex="2" />
        </li>
        <li>
            <label for="age">Age</label>
            <input type="number" name="age" min="13" max="100" tabindex="3" />
        </li>
        <li>
            <label for="phone">Telephone</label>
            <input type="tel" name="phone" required tabindex="4" />
        </li>
        <li>
            <label for="email">Email</label>
            <input type="email" name="email" required tabindex="5" />
        </li>
        <li>
            <label for="password">Password</label>
            <input type="password" disabled name="password" tabindex="6" />
        </li>
    </ol>
</fieldset>
<button type="submit" tabindex="7">Submit</button>

CSS

body {
    padding: 1em;
}
ol {
    margin: 1em auto;
}
ol > li {
    list-style: none;
    margin: 0 auto 1em;
}
label {
    display: block;
    margin: 0 auto 0.25em;
}
fieldset legend {
    font-weight: bold;
    padding-bottom: 1em;
}
input {
    -webkit-box-shadow: none !important;
    outline: 2px outset transparent;
    border: 2px solid silver;
    background: white;
    padding: 3px;
    outline: none !important;
}
input:focus {
    background-color: yellow;
}
input:required:valid {
    background-color: green;
}
input[type=number]:invalid:focus {
    background-color: red;
}
input[disabled] {
    background: #eee;
}
button {
    background: grey;
    color: #fff;
    font-weight: bold;
}
button:not([disabled]) {
    background: green;
}