Como estilizar suspensão de seleção no CSS
Um suspensão é uma lista de opções que aparece apenas quando o usuário clica ou paira em uma opção e seleciona uma ou mais opções da lista fornecida. Existem muitas maneiras de estilizar uma lista suspensa usando diferentes propriedades CSS, por exemplo, cor, pairar, posição, margem e muito mais.
Estamos aqui para explicar como estilizar um menu suspenso usando CSS. Para esse fim, primeiro, explicaremos o processo de criação de um menu suspenso clicável e, depois disso, estilaremos o menu suspenso de seleção no CSS.
Como criar um menu suspenso no CSS?
Você pode criar um menu suspenso no HTML usando e tags. Para entender com mais clareza, vamos para a sintaxe do menu suspenso.
Sintaxe
Aqui está a sintaxe do menu suspenso:
Vamos explicar gradualmente as tags HTML usadas no bloco de código acima:
- rótulo: É usado para especificar a opção reduzida em forma de texto.
- Selecione: Este elemento permite ao usuário selecionar um item de uma lista.
- opção: É usado para fornecer opções para o menu suspenso.
Aqui apresentamos um exemplo prático para explicar o ponto.
Exemplo
No exemplo dado, criaremos um e adicionaremos um menu suspenso dentro dele. Depois disso, rotularemos o menu usando o “”Tag e atribua os valores da opção com o“" marcação. Adicionamos os elementos dentro da tag para mostrar o menu no centro da tela:
Linux Dica
Selecione Nome = "Selecione">
Depois de executar o código fornecido, o seguinte suspenso será exibido:
Como você pode ver, o menu suspenso criado tem uma aparência simples. No entanto, você pode estilizá -lo usando diferentes propriedades CSS.
Como estilizar suspensão de seleção no CSS?
No CSS, iremos estilizar o menu suspenso de seleção da seguinte forma.
Etapa 1: cabeçalho de estilo
Vamos modificar a cor do cabeçalho usando o “cor" propriedade:
H1
cor verde;
Aqui, nós atribuímos um “verde”Cor para o título.
Etapa 2: Alterar o tipo de cursor
Altere o tipo de cursor usando o “cursor" propriedade. Como resultado, quando o usuário paira na lista de menus, a forma do cursor muda para o ponteiro da mão:
#select
Cursor: Ponteiro;
Etapa 3: menu suspenso de estilo
Aqui, definiremos os atributos do menu suspenso, atribuindo -lhe uma cor de fundo “LightseAgreen", fronteira "1 px preto sólido", largura "300px”E altura“30px”:
Selecione
Antecedentes: LightAgreen;
borda: 1px preto sólido;
Largura: 300px;
Altura: 30px;
Depois de concluir todas essas etapas, execute o arquivo HTML e observe o resultado:
A saída mostra que a aparência do nosso menu suspenso foi estilizado.
Conclusão
O CSS oferece várias propriedades que podem ser usadas para estilizar os menus suspensos. Por exemplo, as propriedades de borda, cor e fundo são usadas para estilizar a borda, cor e cor do menu. Este artigo explicou o método de estilo do menu suspenso e como atribuir diferentes atributos a ele.