CSS - Formulaires

Page 14

HTML

<form method="post" action="#">
    <p>
        <label>
            Nom <br>
            <input type="text" name="text" id="text">
        </label>
    </p>

    <label>
        Email <br>
        <input type="email" name="email" placeholder="Ex: jack.sparrow@sea.com" id="email" required>
    </label>
    <input type="submit" id="submit"> value="Envoyer"
</form>
            

CSS

#email {
    padding: 8px;
    width: 300px;
    border-radius: 5px;
    border: 1px solid grey;
    font-size: 1em;
}

#email:focus {
    outline: 2px solid purple;
}

#submit {
    margin-left: 25px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid purple;
    background-color: white;
    color: purple;
    font-size: 1em;
}

#submit:hover {
    background-color: purple;
    color: white;
}

:required {
    background-color: rgba(255, 0, 0, 0.16);
}

:focus {
    color: blue;
}

#email:invalid {
    color: red;
}
            

Résultat