CSS :default Pseudoclase
Usa la pseudoclase CSS :default para seleccionar y estilizar elementos por defecto. Lee sobre la pseudoclase y practica con ejemplos.
La pseudoclase :default coincide con el elemento predeterminado en un grupo de controles de formulario asociados — aquel que el navegador enviaría (o preseleccionaría) si el usuario no cambia nada. Un ejemplo típico es el botón de radio que comienza seleccionado mediante el atributo checked.
La distinción clave es entre el estado predeterminado y el estado actual:
:defaultcoincide con el elemento que era el predeterminado al cargar la página, y sigue coincidiendo con ese elemento incluso después de que el usuario elija otra opción.:checkedcoincide con lo que está actualmente seleccionado, por lo que cambia conforme el usuario interactúa.
En un grupo de radios con un botón checked, :default siempre apunta a ese botón original, mientras que :checked sigue la elección del usuario. Esto hace que :default sea útil para indicar "esta es la opción recomendada/original" sin re-estilizar mientras el usuario hace clic.
Dónde se aplica
:default solo coincide con estos elementos:
<button>— el botón de envío predeterminado de un formulario (el primer botón de envío).<input>contype="checkbox"otype="radio"— una casilla de verificación/radio que estácheckedpor defecto.<input>contype="submit"otype="image"— el control de envío predeterminado del formulario.<option>— una opción que lleva el atributoselected.
No tiene efecto en entradas de texto, <select> en sí mismo, ni en ningún elemento que no sea de formulario.
Versión
Sintaxis
:default {
/* CSS declarations */
}Casi siempre se combina con un selector de elemento o atributo para que la regla solo afecte al control deseado, por ejemplo input:default o input[type="submit"]:default.
Ejemplo con un botón de radio marcado por defecto
El radio marcado con checked mantiene el brillo azul incluso después de seleccionar No, porque :default recuerda el valor predeterminado en el momento de carga.
<!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>Ejemplo con el botón de envío predeterminado
El primer botón de envío de un formulario es su control predeterminado — presionar Enter en un campo lo activa. Aquí :default resalta ese primer botón para que los usuarios puedan ver qué acción se ejecuta por defecto.
<!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>Ejemplo con una opción seleccionada por defecto
Para un menú <select>, :default apunta al <option> que tiene el atributo selected — el valor mostrado antes de que el usuario abra el menú desplegable.
option:default {
font-weight: bold;
color: #1c87c9;
}<label for="size">Size:</label>
<select id="size">
<option>Small</option>
<option selected>Medium</option>
<option>Large</option>
</select>Aquí Medium se estiliza porque lleva el atributo selected, incluso después de que el usuario elija un tamaño diferente.
Notas y consideraciones
- Un predeterminado por grupo. Un grupo de radios debe tener como máximo un elemento predeterminado; si marcas varios con
checked, solo el último es el predeterminado en el DOM. :defaultes estático,:checkedes dinámico. Usa:defaultpara señalar la opción original/recomendada y:checkedpara reaccionar a la selección actual del usuario.- Botones de envío. Solo el primer control de tipo envío en un formulario es el predeterminado, por lo que
:defaultcoincide con un solo botón aunque existan varios. - Combínalo con pseudoclases de estado como
:disabled,:enabled,:requiredy:optionalpara construir formularios claros y completamente estilizados.
Soporte de navegadores
:default es compatible con todos los navegadores modernos, incluyendo Chrome, Firefox, Safari y Edge.