W3docs
es
Iniciar sesión

Clase pseudo :default de CSS

Use the :default CSS pseudo-class for selecting and styling the default elements. Read about the pseudo-class and practice with examples.

La pseudo-clase :default coincide con el elemento predeterminado en un grupo de elementos asociados, como el botón de opción que está inicialmente seleccionado mediante el atributo checked, incluso si el usuario ha seleccionado un valor diferente desde entonces. A diferencia de :checked, que refleja el estado interactivo actual, :default solo coincide con el estado predeterminado inicial del elemento.

Esta pseudo-clase solo se puede usar en los elementos <button>, <input> (cuando type="checkbox" o type="radio") y <option>.

Versión

HTML Living Standard

HTML5

Selectors Level 4

Sintaxis

Código de sintaxis CSS :default

:default {
  css declarations;
}

Ejemplo del selector :default utilizado para la etiqueta <input>:

Ejemplo de código CSS :default

<!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>
Pruébalo tú mismo »

Ejemplo del selector :default utilizado para la etiqueta <input> con un atributo type:

Otro ejemplo de código CSS :default

<!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>
Pruébalo tú mismo »

Práctica

Práctica

¿Para qué se puede usar el 'estilo predeterminado' en CSS?