:default
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde enero de 2020.
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 |
|---|
| HTML # selector-default |
| Selectors Level 4 # default-pseudo |