Como alterar a cor da opção selecionada usando CSS

Como Alterar A Cor Da Opcao Selecionada Usando Css



As opções são dadas ao usuário quando existem vários valores de um único elemento, de onde os usuários podem selecionar uma opção de acordo com suas preferências. Ele existe em diferentes formas, como caixa de seleção, menu suspenso e botão de opção. Mais especificamente, o menu suspenso fornece listas predefinidas de opções que permitem ao usuário selecionar uma.

Este manual explicará o procedimento para modificar a cor da opção selecionada. Para isso, primeiro, vamos criar um menu suspenso e estilizá-lo usando CSS e, em seguida, alterar a cor da opção selecionada.







Vamos começar!



Como criar um menu suspenso usando HTML e CSS?

Em HTML, você pode criar um menu suspenso usando “ ”, “ ' e ' ' Tag. Para entender mais claramente, vamos para a sintaxe do menu suspenso.



Sintaxe





Aqui está a sintaxe do menu suspenso:

< etiqueta > Texto etiqueta >
< selecionar >
< opção valor = '' > Opção 1 opção >
< opção valor = '' > opção 2 opção >

...
< opção valor = '' > opção N opção >
selecionar >



Vamos explicar as tags HTML usadas na sintaxe acima:

  • : É usado para especificar a opção abreviada
  • : Este elemento permite que o usuário selecione um item de uma lista.
  • : Ele é usado para fornecer opções para o menu suspenso.

Aqui apresentamos um exemplo prático para explicar a sintaxe acima.

Etapa 1: criar um menu suspenso

Primeiramente, vamos criar um

e adicionar um cabeçalho usando a tag

. Para adicionar um menu suspenso dentro dele, usaremos uma etiqueta de rótulo e adicionaremos “ Escolha um país ” como o rótulo. Depois disso, usaremos a tag