CSS3 Selectors: :required & :optional

This entry is part 23 of 40 in the series CSS3 Selectors

We might want to highlight a form field where the users will have to fill up.

:required

Applies to form controls that have the <required> attribute set.

:optional

Applies to all form controls that do not have the <required> attribute.

Quick contact form

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Quick contact form</title>
    <style>
        input:required {
            border: 1px solid red;
        }
        input:optional {
            border: 1px solid blue;
        }
    </style>
</head>
<body>
<form>
    <fieldset>
        <legend>Contact information</legend>
        <ul>
            <li>
                <label for='email'>Email:</label>
                <input required type='email' id='email' name='email'/>
            </li>
            <li>
                <label for='tel'>Telephone number:</label>
                <input type='tel' id='tel' name='tel'/>
            </li>
            <li>
                <label for='url'>Website:</label>
                <input type='url' id='url' name='url'/>
            </li>
        </ul>
        <input type='submit' value='Submit this' />
    </fieldset>
</form>
</body>
</html>

Series Navigation<< CSS3 Selectors: Pseudo class :checked
CSS3 Selectors: Structural pseudo-class :first-child >>