Cómo Cambiar el Color de la Opción Seleccionada Usando CSS

En este artículo aprenderás cómo cambiar el color de la opción seleccionada en un menú desplegable usando CSS. Este es un pequeño detalle que puede añadir un toque de personalización a tu página web o aplicación. Además, explicaremos las diferentes formas en que se puede aplicar esta técnica.

Cambiar el color de la opción seleccionada mediante CSS

Para cambiar el color de la opción seleccionada, usaremos la propiedad "background-color". Comencemos por seleccionar el elemento "select" y luego usaremos la pseudoclase ":focus" para aplicar el estilo cuando el elemento está seleccionado. Veamos el siguiente ejemplo:


select:focus {
background-color: #e6e6e6;
}


En este ejemplo, hemos seleccionado el elemento "select" y hemos aplicado un estilo de fondo (background-color) cuando está seleccionado usando la pseudoclase ":focus". El color que hemos seleccionado es un gris claro (#e6e6e6), pero puedes seleccionar cualquier color de tu preferencia.

Ahora, ¿y si quisiéramos agregar más estilos a la opción seleccionada? Podemos hacerlo a través de la pseudoclase ":selected". Por ejemplo:


select:focus option:selected {
background-color: #e6e6e6;
color: #000;
}


En este ejemplo, hemos seleccionado el elemento "select" y hemos aplicado un estilo a la opción seleccionada cuando el elemento "select" está seleccionado. Hemos agregado el estilo de color a la opción seleccionada (color: #000), así como un estilo de fondo (background-color: #e6e6e6).

Cambiar el color de varias opciones seleccionadas

¿Qué sucede si queremos cambiar el color de varias opciones seleccionadas? Podemos hacerlo utilizando la propiedad "multiple" en la etiqueta "select". Esto permitirá que se seleccionen múltiples opciones a la vez. Por ejemplo:


Opción 1Opción 2Opción 3

select:focus option:checked {
background-color: #e6e6e6;
color: #000;
}


En este ejemplo, hemos agregado el atributo "multiple" a la etiqueta "select", lo que permitirá que se seleccionen múltiples opciones. Luego, hemos seleccionado el elemento "select" y hemos aplicado un estilo a las opciones seleccionadas utilizando el pseudoclase ":checked". Nuevamente, hemos agregado un estilo de color y de fondo.

Ejemplos de código de cambio de color para la opción seleccionada

• Cambiar el color de la opción seleccionada a rojo


select:focus option:selected {
background-color: red;
color: #fff;
}


• Cambiar el color de la opción seleccionada a verde y negrita


select:focus option:selected {
background-color: green;
color: #fff;
font-weight: bold;
}


• Cambiar el color de las opciones seleccionadas múltiples a amarillo


select:focus option:checked {
background-color: yellow;
color: #000;
}


Conclusión

Como has visto, cambiar el color de la opción seleccionada es muy sencillo utilizando CSS. Puedes usar esta técnica para agregar un toque de personalización a tus menús desplegables en tu página web o aplicación. Experimenta con diferentes colores y estilos para encontrar el que mejor se adapte a tus necesidades.

Te invitamos a poner en práctica lo aprendido y a seguir explorando el mundo de la programación web.

Preguntas frecuentes

¿Es posible cambiar el color de las opciones del menú sin seleccionarlas?

Sí, es posible. En lugar de utilizar la pseudoclase ":focus" o ":selected", utiliza la pseudoclase ":hover". Por ejemplo:


select option:hover {
background-color: #e6e6e6;
}


En este ejemplo, hemos seleccionado el elemento "select" y hemos aplicado un estilo a las opciones cuando el usuario pasa el mouse sobre ellas utilizando la pseudoclase ":hover". Hemos agregado un estilo de fondo (background-color: #e6e6e6) a la opción que el usuario está señalando con el mouse.

¿Puedo aplicar este estilo a todas las páginas de mi sitio web?

Sí, puedes aplicar este estilo en todas las páginas de tu sitio web siguiendo las buenas prácticas de CSS. Para hacer esto, simplemente agrega el estilo en tu archivo de hojas de estilo (CSS).

¿Además de cambiar el color, puedo personalizar más estilos para la opción seleccionada?

Sí, puedes personalizar más estilos. Algunos estilos que puedes personalizar son: color de fuente (font-color), peso de la fuente (font-weight), estilo de la fuente (font-style), color del borde (border-color), grosor del borde (border-width), estilo del borde (border-style), entre otros.

¿Cómo cambio el estilo de la opción seleccionada en una lista desplegable hecha con JavaScript?

Si estás utilizando JavaScript para crear tu menú desplegable, deberás seleccionar el elemento y aplicar los estilos con CSS. Asegúrate de que el elemento seleccionado tenga una clase o un identificador único para que puedas aplicar los estilos correctamente.

CSS - Cómo eliminar completamente los bordes de una tabla HTML

Cómo crear divs superpuestos con CSS

Cómo alinear imágenes a la derecha en CSS

Min-width y Max-width en Consultas multimedia | Explicado

Cómo hacer sangrías en HTML

CSS strikethrough

CSS Color de Fondo Opacidad

Cómo dar espacio entre dos enlaces en HTML y CSS

Cómo establecer un borde de fuente en CSS