: predeterminado - Trucos CSS

Anonim

El :defaultpseudo selector coincidirá con el predeterminado en un grupo de elementos asociados, como el botón de opción en un grupo de botones que se selecciona de manera predeterminada, incluso si el usuario ha seleccionado un valor diferente.

input(type="radio"):default + label:after ( content: ' (default)'; color: #999; font-style: italic; )

El CSS anterior apunta a la etiqueta que viene inmediatamente después del botón de opción seleccionado por defecto en un grupo de botones de opción:

  • rojo
  • verde
  • azul

La etiqueta del botón de opción verde será seguida por el texto "(predeterminado)" en gris, texto en cursiva en los navegadores compatibles.

  • rojo
  • verde
  • azul

Los ejemplos incluyen el botón de envío predeterminado en un grupo de botones, la opción predeterminada de un menú emergente, el botón de opción que tiene el checkedatributo establecido en el HTML (como se ve en los navegadores compatibles) y las casillas de verificación que están marcadas por defecto.

Más recursos

  • Manifestación
  • Página MDN activada: predeterminado
  • Especificaciones de la interfaz de usuario W3C CSS3
  • Selectores W3C Nivel 4

Soporte del navegador

Los distintos navegadores tienen distintos niveles de compatibilidad. Firefox proporciona soporte completo. Los navegadores Webkit admiten los botones predeterminados, pero no la radio o las casillas de verificación, y Opera es lo contrario, lo admite en los botones de opción y las casillas de verificación, pero no en el envío.

  • Opera admite :defaultcasillas de verificación y botones de opción.
  • Los navegadores Webkit, incluidos Chrome y Safari, admiten :defaultel botón de envío
  • Firefox admite :defaultlos tipos de entrada de casilla de verificación, radio Y envío.
  • Internet Explorer no es compatible :defaultcon los tipos de entrada de casilla de verificación, radio o envío.
Cromo Safari Firefox Ópera ES DECIR Androide iOS
10 5 4 10 ninguno ninguno 5