CSS :default Pseudo-Classe

La :default pseudo-classe correspond à l'élément par défaut dans un groupe d'éléments associés, comme le bouton radio initialement sélectionné via l'attribut checked, même si l'utilisateur a ensuite sélectionné une autre valeur. Contrairement à :checked, qui reflète l'état interactif actuel, :default ne correspond qu'à l'état par défaut initial de l'élément.

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

Version

HTML Living Standard

HTML5

Selectors Level 4

Syntaxe

Code de syntaxe CSS :default

css

:default {
  css declarations;
}

Exemple du sélecteur :default utilisé pour la balise `<input>` :

Exemple de code CSS :default

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input:default {
        box-shadow: 0 0 2px 2px #1c87c9;
      }
      .example {
        margin: 20px auto;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>:default selector example</h2>
    <div class="example">
      <p>Do you like coffee?</p>
      <input type="radio" name="radios" id="ex1" checked />
      <label for="ex1">Yes</label>
      <br />
      <input type="radio" name="radios" id="ex2" />
      <label for="ex2">No</label>
    </div>
  </body>
</html>

Try it Yourself »

Exemple du sélecteur :default utilisé pour la balise `<input>` avec un attribut de type :

Autre exemple de code CSS :default

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>:default selector example</h2>
    <div class="example">
      <form action="#">
        <input type="submit" value="Yes" />
        <input type="submit" value="No" />
      </form>
    </div>
  </body>
</html>

Try it Yourself »

Pratique

À quoi peut servir le 'style par défaut' en CSS ?

Il est utilisé pour définir l'apparence standard de chaque élément.Il est utilisé pour définir la mise en page par défaut d'une page HTML.Il peut être utilisé pour styliser des attributs, tels que la couleur et la taille de la police, d'une page HTML.Il ne peut pas être utilisé pour styliser des éléments HTML.

CSS :default Pseudo-Classe ​

Version ​

Syntaxe ​

Exemple du sélecteur :default utilisé pour la balise <input> : ​