Pure CSS3 form validation

by Daniel Hug

HTML

<h1>CSS3 form validation</h1>
<form>
    <h2>Sign Up</h2>
    <label for="name">Name:</label>
    <input type="text" id="name" required/>

    <label for="email">Email:</label>
    <input type="email" id="email" required pattern="^\S+@(([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6})$" />

    <label for="url">Website:</label>
    <input type="text" id="url" required pattern="^(https?://)?(([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6})(/[\w\d:#@%/;$()~_?\+-=\\\.&]*)?$" />

    <input type="submit" value="Let's Get Started!"/>
</form>

CSS

label, input[type=submit] {
    cursor: pointer;
}
html {
    height: 100%;
    background: #eeeeee;
    background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
    background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%);
    background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%);
    background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%);
    background: linear-gradient(top,  #eeeeee 0%,#cccccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#cccccc',GradientType=0);
    background-attachment: fixed;
}
body {
    font: 16px Arial;
    text-align: center;
}
h1, h2 {
    margin-top: 0;
    color: #444;
    text-shadow: 0 1px 2px #fff;
}
h1 {
    font-size: 48px;
    text-shadow: 0 1px 2px #fff, 0 1px 2px #fff;
}
form {
    display: inline-block;
    padding: 32px 64px 38px;
    margin: 28px auto 0;
    text-align: left;
    border-radius: 36px;
    box-shadow: inset 0 2px 12px #000;
}
h2 {
    font: bold 22px Verdana;
}
label {
    display: block;
    margin: 14px 0 3px;
}
label:first-child {
    margin-top: 0;
}
input {
    outline: 0;
}
input:not([type=submit]) {
    display: block;
    width: 300px;
    border: 1px solid #888;
    padding: 11px;
    margin: 0;
    border-radius: 6px;
    box-shadow: inset 0 2px 4px #ccc;
    box-sizing: border-box;
}
input:focus:not([type=submit]) {
    box-shadow: 0 0 24px #eff, inset 0 2px 4px -1px #444;
}
input:valid:not([type=submit]) {
    border-color: #080;
    background: #e6ffe6 url(http://webdesigntutsplus.s3.amazonaws.com/tuts/214_html5_form_validation/demo/images/valid.png) no-repeat 97% center;
}
input:focus:invalid:not([type=submit]) {
    border-color: #800;
    background: #ffe6e6 url(http://webdesigntutsplus.s3.amazonaws.com/tuts/214_html5_form_validation/demo/images/invalid.png) no-repeat 97%...