Cómo cambiar el color de opción seleccionada usando CSS
Se dan opciones al usuario cuando existen múltiples valores de un solo elemento, desde donde los usuarios pueden seleccionar una opción de acuerdo con sus preferencias. Existe en diferentes formas, como una casilla de verificación, menú desplegable y botón de radio. Más específicamente, el menú desplegable proporciona listas predefinidas de opciones que permiten al usuario seleccionar una.
Este manual explicará el procedimiento para modificar el color de la opción seleccionada. Para esto, primero, crearemos un menú desplegable y lo peinaremos usando CSS y luego cambiaremos el color de opción seleccionada.
Empecemos!
Cómo crear menú desplegable usando HTML y CSS?
En HTML, puede crear un menú desplegable usando "","" y ""Etiquetas. Para comprender más claramente, pasemos a la sintaxis del menú desplegable.
Sintaxis
Aquí está la sintaxis del menú desplegable:
Expliquemos las etiquetas HTML utilizadas en la sintaxis anterior:
- : Se utiliza para especificar la opción abreviada en formulario de texto.
- : Este elemento permite al usuario seleccionar un elemento de una lista.
- : Se utiliza para proporcionar opciones para el menú desplegable.
Aquí presentamos un ejemplo práctico para explicar la sintaxis anterior.
Paso 1: crear un menú desplegable
En primer lugar, crearemos un y agregaremos un encabezado con el
etiqueta. Para agregar un menú desplegable dentro, usaremos una etiqueta de etiqueta y agregaremos "Elige un país"Como la etiqueta. Después de eso, utilizaremos la etiqueta para hacer que las opciones sean deliciosas para el usuario y asignaremos los valores de opción con el "" etiqueta.
Html
Linux
Nota: Hemos usado "Oculto seleccionado" para especificar "-Escoge una opción-"Como la opción predeterminada. Pero cuando el usuario selecciona uno de ellos, se ocultará.
En adelante, iremos al CSS y el estilo.
Paso 2: Menú desplegable de estilo con CSS
Usaremos "div"Para acceder al contenedor creado y establecer el color de fondo del DIV como"RGB (191, 207, 235)". También estableceremos la altura del Div, el tamaño de la fuente del texto y el color del texto como "150px","largo X", y "RGB (2, 0, 0)", Respectivamente. A continuación, estableceremos el borde del Div como "5px","cresta", y "RGB (108, 75, 209)".
CSS
div
Color de fondo: RGB (191, 207, 235);
Altura: 150px;
tamaño de fuente: X-Large;
Color: RGB (2, 0, 0);
borde: 5px cresta RGB (108, 75, 209);
Ahora, peinaremos el menú desplegable y estableceremos el color de fondo del menú como "RGB (194, 222, 209)"Y el borde del menú como"3px","sólido", y "RGB (84, 73, 116)". Después de eso, estableceremos el ancho, la altura y el tamaño de la fuente del menú como "300px","30px" y "grande", Respectivamente:
seleccionar
Antecedentes: RGB (194, 222, 209);
borde: 3px sólido RGB (84, 73, 116);
Ancho: 300px;
Altura: 30px;
tamaño de fuente: grande;
Como puede ver en la salida, el menú desplegable se crea y diseña con éxito utilizando el HTML y CSS:
En la salida proporcionada anteriormente, se puede ver que se crea el menú desplegable y le permite seleccionar cualquier opción de acuerdo con sus preferencias. Nos movemos a la siguiente sección, donde cambiaremos el color de la opción seleccionada usando el CSS.
Cómo cambiar el color de la opción seleccionada usando CSS?
Para cambiar el color de opción seleccionada del menú, el ":comprobadoSe utiliza el selector de CSS. : Checked es un elemento pseudo-clase que solo se puede vincular con elementos de tipo de entrada, como "opción","caja", y "radio botones". Se utiliza principalmente para cambiar el comportamiento del valor seleccionado de estos elementos.
Sintaxis
La sintaxis de: verificada es:
element_name: checked
Declaraciones de CSS;
En las declaraciones de CSS, puede escribir el código para el valor seleccionado de la opción, la casilla de verificación y la radio.
Ahora, muévase al menú y cambie el color de la opción seleccionada utilizando el: Selector marcado. Para hacerlo, usaremos "opción"Para acceder a las opciones creadas en el menú y":comprobado"Pseudo-Clase a la opción Menú seleccionada. Permite cambiar el comportamiento de la opción seleccionada. A continuación, estableceremos el color de la opción seleccionada como "RGB (246, 250, 0)"Y el fondo de la opción seleccionada como"RGB (5, 26, 1)":
Opción: marcado
Color: RGB (246, 250, 0);
Color de fondo: RGB (5, 26, 1);
Como puede ver en la siguiente salida, se cambia el fondo de fondo y opción seleccionada:
Hemos explicado el método de cambiar el color de opción seleccionado usando el CSS.
Conclusión
El ":comprobado"El selector de pseudo-clase se usa para cambiar el color de opción seleccionada. El: Checked se utiliza junto con el "opción"Del menú desplegable, y después de eso, puede configurar el color de la opción seleccionada. Este manual explicó el método de crear y diseñar el menú desplegable y luego demostró el procedimiento para cambiar el color de opción seleccionada usando CSS.