La pseudo-clase :default de CSS representa cualquier elemento de formulario que sea el predeterminado entre un grupo de elementos relacionados.

Este selector se puede usar en los elementos <button>, <input type="checkbox">, <input type="radio"> y <option>.

/* Selecciona cualquier <input> predeterminado */
input:default {
  background-color: lime;
}

Los elementos agrupados que permiten selecciones múltiples también pueden tener múltiples valores predeterminados, es decir, pueden tener múltiples elementos seleccionados inicialmente. En este caso, todos los valores predeterminados se representan utilizando la pseudo-clase :default. Por ejemplo, puede diseñar las casillas de verificación predeterminadas entre un grupo de casillas de verificación (checkboxes).

Sintaxis

:default

Ejemplo

HTML

<input type="radio" name="season" id="spring">
<label for="spring">Spring</label>

<input type="radio" name="season" id="summer" checked>
<label for="summer">Summer</label>

<input type="radio" name="season" id="fall">
<label for="fall">Fall</label>

<input type="radio" name="season" id="winter">
<label for="winter">Winter</label>

CSS

input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}

Resultado

Especificaciones

Especificación Estado Comentarios
HTML Living Standard
La definición de ':default' en esta especificación.
Living Standard Ningún cambio.
HTML5
La definición de ':default' en esta especificación.
Recommendation Define la semántica HTML asociada y la validación de restricciones.
Selectors Level 4
La definición de ':default' en esta especificación.
Working Draft Ningún cambio.
CSS Basic User Interface Module Level 3
La definición de ':default' en esta especificación.
Recommendation Definición inicial, pero sin la semántica asociada.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 10Edge ? Firefox Soporte completo 4IE Sin soporte NoOpera Soporte completo 10Safari Soporte completo 5WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Soporte completo 4Opera Android Soporte completo 10Safari iOS Soporte completo 5Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown

 

Etiquetas y colaboradores del documento

Colaboradores en esta página: lajaso, teoli, Mgjbot, Nathymig, HenryGR
Última actualización por: lajaso,