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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:default | Chrome Soporte completo 10 | Edge Sin soporte No | Firefox Soporte completo 4 | IE Sin soporte No | Opera Soporte completo 10 | Safari Soporte completo 5 | WebView Android Soporte completo 37 | Chrome Android Soporte completo 18 | Firefox Android Soporte completo 4 | Opera Android Soporte completo 10.1 | Safari iOS Soporte completo 5 | Samsung Internet Android Soporte completo 1.0 |
Leyenda
- Soporte completo
- Soporte completo
- Sin soporte
- Sin soporte