Como alterar a cor da opção 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. Existe em diferentes formas, como uma caixa de seleção, menu suspenso e botão de rádio. 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, criaremos um menu suspenso e estilizamos ele usando CSS e depois alteraremos a cor da opção selecionada.
Vamos começar!
Como criar menu suspenso usando HTML & CSS?
No HTML, você pode criar um menu suspenso usando “","" e "" Tag. Para entender com mais clareza, vamos para a sintaxe do menu suspenso.
Sintaxe
Aqui está a sintaxe do menu suspenso:
Vamos explicar as tags HTML usadas na sintaxe acima:
- : É usado para especificar a opção reduzida em forma de texto.
- : Este elemento permite ao usuário selecionar um item de uma lista.
- : É usado para fornecer opções para o menu suspenso.
Aqui apresentamos um exemplo prático para explicar a sintaxe acima.
Etapa 1: Crie um menu suspenso
Em primeiro lugar, criaremos um e adicionaremos um título usando o
marcação. Para adicionar um menu suspenso, usaremos uma tag de etiqueta e adicionaremos “Escolha um país”Como o rótulo. Depois disso, usaremos a tag para tornar as opções deliciosas para o usuário e atribuir os valores da opção com o “" marcação.
Html
Linux
Observação: Nós usamos "escondido selecionado" especificar "-escolha uma opção-”Como a opção padrão. Mas quando o usuário selecionar um deles, estará oculto.
A seguir, iremos para o CSS e estilizá -lo.
Etapa 2: menu suspenso de estilo usando CSS
Nós vamos usar "div”Para acessar o contêiner criado e definir a cor de fundo da div como“RGB (191, 207, 235)”. Também definiremos a altura da div, tamanho da fonte do texto e cor do texto como “150px","extra grande", e "RGB (2, 0, 0)”, Respectivamente. Em seguida, definiremos a fronteira da div como “5px","cume", e "RGB (108, 75, 209)”.
CSS
div
Background-Color: RGB (191, 207, 235);
Altura: 150px;
tamanho de fonte: x-large;
Cor: RGB (2, 0, 0);
fronteira: 5px Ridge RGB (108, 75, 209);
Agora, vamos estilizar o menu suspenso e definir a cor de fundo do menu como “RGB (194, 222, 209)”E a fronteira do menu como“3px","sólido", e "RGB (84, 73, 116)”. Depois disso, definiremos a largura, a altura e o tamanho da fonte do menu como “300px","30px" e "grande”, Respectivamente:
Selecione
Antecedentes: RGB (194, 222, 209);
borda: 3px RGB sólido (84, 73, 116);
Largura: 300px;
Altura: 30px;
tamanho de fonte: grande;
Como você pode ver na saída, o menu suspenso é criado e estilizado com sucesso usando o HTML e o CSS:
Na saída acima fornecida, pode-se ver que o menu suspenso é criado e permite selecionar qualquer opção de acordo com suas preferências. Mudamos para a próxima seção, onde alteraremos a cor da opção selecionada usando o CSS.
Como alterar a cor da opção selecionada usando CSS?
Para alterar a cor da opção selecionada do menu, o “:verificado”O seletor de CSS é usado. : verificado é um elemento pseudo-classe que só pode estar ligado aos elementos do tipo de entrada, como “opção","Caixa de seleção", e "rádio botões”. É usado principalmente para alterar o comportamento do valor selecionado desses elementos.
Sintaxe
A sintaxe de: verificada é:
Element_name: verificado
Declarações CSS;
Nas declarações CSS, você pode escrever o código para o valor selecionado da opção, caixa de seleção e rádio.
Agora, vá para o menu e altere a cor da opção selecionada usando o: seletor verificado. Para fazer isso, usaremos “opção”Para acessar as opções criadas no menu e“:verificado”Pseudo-classe para a opção de menu selecionado. Permite alterar o comportamento da opção selecionada. Em seguida, definiremos a cor da opção selecionada como “RGB (246, 250, 0)”E o plano de fundo da opção selecionada como“RGB (5, 26, 1)”:
Opção: verificado
Cor: RGB (246, 250, 0);
Background-Color: RGB (5, 26, 1);
Como você pode ver na saída a seguir, o plano de fundo e a cor da opção selecionada são alterados:
Explicamos o método de alterar a cor da opção selecionada usando o CSS.
Conclusão
O ":verificado”Seletor de pseudo-classe é usado para alterar a cor da opção selecionada. O: verificado é utilizado junto com o “opção”Do menu suspenso e, depois disso, você pode definir a cor da opção selecionada. Este manual explicou o método de criar e modelar o menu suspenso e depois demonstrou o procedimento para alterar a cor da opção selecionada usando CSS.