Pseudo Classe CSS :default

❮ Précédent Suivant ❯

La pseudo-classe CSS :default correspond à la valeur par défaut dans un groupe d'éléments associés, tel que le bouton radio dans un groupe de boutons sélectionnés par défaut, même si l'utilisateur a sélectionné une valeur différente.

La pseudo-classe :default ne peut être utilisé que sur les éléments <button>, <input> (lorsque type="checkbox" ou type="radio") et <option>.

Version

CSS3

Syntaxe

:default {
css declarations;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      input:default {
      box-shadow: 0 0 2px 2px #1c87c9;
      }
      .example {
      margin: 20px auto;
      font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :default</h2>
    <div class="example">
      <p>Vous aimez le café?</p>
      <input type="radio" name="radios" id="ex1" checked>
      <label for="ex1">Oui</label> <br/>
      <input type="radio" name="radios" id="ex2">
      <label for="ex2">Non</label>
    </div>
  </body>
</html>

Essayez-vous-même!

Voyons un autre exemple avec cette pseudo-classe:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .example {
      margin: 40px auto;
      max-width: 700px;
      }
      input[type=submit] {
      padding: .6em 1em;
      font-size: 1em;
      width: 100px;
      margin-bottom: 1em;
      }
      input[type=submit]:default {
      border: 4px dotted #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :default </h2>
    <div class="example">
      <form action="#">
        <input type="submit" value="Oui">
        <input type="submit" value="Non">
      </form>
    </div>
  </body>
</html>