CSS3 Selectors: form control :disabled

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

:disable allowed us to target a user interface that is disabled.

This is a UI element states pseudo-class.

Quick contact form

<!DOCTYPE html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>Quick contact form</title>
        input:disabled {
            border: 2px dotted orange;
        <legend>Contact information</legend>
                <label for='email'>Email:</label>
                <input required type='email' id='email' name='email'/>
                <label for='tel'>Telephone number:</label>
                <input required type='tel' id='tel' name='tel'/>
                <label for='url'>Website:</label>
                <input required type='url' id='url' name='url' disabled/>
        <input type='submit' value='Submit this' />

Series Navigation<< CSS3 Selectors: Combining :focus and :hover
CSS3 Selectors: Pseudo class :checked >>

Leave a comment

Leave a Reply