Clase pseudo :default de CSS

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

css

:default {
  css declarations;
}

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

Ejemplo de código 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 »

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

Otro ejemplo de código 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 »

Práctica

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

Se utiliza para definir el aspecto estándar de cada elemento.Se utiliza para establecer el diseño predeterminado de una página HTML.Se puede usar para dar estilo a atributos, como el color y el tamaño de fuente, de una página HTML.No se puede usar para dar estilo a elementos HTML.

Clase pseudo :default de CSS ​

Versión ​

Sintaxis ​

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