Escolha de Estilo Dropdown no CSS

1. Use appearance:none para ocultar a seta padrão e definir uma seta personalizada no menu suspenso Selecionar em CSS
2. Use overflow:hidden para ocultar a seta padrão e definir uma seta personalizada no menu suspenso de seleção em CSS

Neste artigo, apresentaremos alguns métodos para definir o estilo do menu suspenso de seleção em CSS.

Use appearance:none para ocultar a seta padrão e definir uma seta personalizada no menu suspenso Selecionar em CSS

Podemos definir o estilo do menu suspenso de seleção usando apenas CSS, ocultando o conjunto de setas padrão e adicionando um conjunto de setas personalizado. Existe uma propriedade CSS appearance que define o estilo de um elemento com base no sistema operacional. Os estilos aplicados com a propriedade appearance serão nativos da plataforma. Podemos usar esta propriedade na tag select e definir a seta no menu suspenso. A opção none na propriedade appearance ocultará a seta padrão da lista suspensa. Então, podemos fazer o upload de nossa seta personalizada. Podemos usar as propriedades -webkit-appearance e -moz-appearance nos navegadores baseados em WebKit e baseados em Blink.

Por exemplo, crie uma lista suspensa usando as tags select e option em HTML. Escreva as opções de sua escolha. Em CSS, selecione a tag select e defina as diferentes propriedades como margin, width, height, padding, font-size, border. Em seguida, use a propriedade appearance e defina-a como none. Em seguida, use a propriedade abreviada background para definir a seta personalizada. Use a função url() para selecionar a imagem. Defina o estilo da imagem com propriedades como background-repeat, background-size e background-color. Use a opção no-repeat para mostrar a imagem uma vez. Defina a posição para 100% e background-size para 15%.

Portanto, criamos o estilo de um menu suspenso usando CSS.

Código de exemplo:

<select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
</select>

select {
 margin: 40px;
 width: 160px;
 padding: 4px 30px 4px 4px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 30px;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}

Use overflow:hidden para ocultar a seta padrão e definir uma seta personalizada no menu suspenso de seleção em CSS

Podemos envolver a tag select com um div e definir seu overflow como hidden para ocultar a seta padrão no menu suspenso. Então, podemos adicionar nossa seta personalizada, da mesma forma que o primeiro método. A propriedade overflow definida como hidden irá cortar o overflow no contêiner. O resto do conteúdo ficará oculto. Vamos definir a largura do div menor do que o menu suspenso. Portanto, a seta no menu suspenso ficará fora do contêiner ao usar o valor hidden na propriedade overflow. Finalmente, podemos adicionar nossa seta personalizada.

Por exemplo, crie um div com a classe menu. Dentro de div, escreva os mesmos itens suspensos do primeiro método. Em CSS, selecione a tag select que é descendente da classe menu como .menu select e aplique os estilos. Defina o background como transparent. Crie a width de 140px. Defina font-size como 14px e crie uma borda. Defina a altura do menu para 35px. Em seguida, selecione a classe menu e dê a margem de 40px, largura de 125px e altura de 34px. Certifique-se de que a largura do contêiner seja menor que a do menu. Em seguida, defina o overflow como hidden e defina a imagem de fundo como o primeiro método.

Aqui, removemos a seta padrão do menu suspenso e adicionamos uma seta personalizada. Assim, podemos definir o estilo do menu suspenso de seleção em CSS.

Código de exemplo:

<div class="menu">
 <select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
 </select>
</div>

.menu select {
 background: transparent;
 width: 140px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 35px; 
} 
.menu{
 margin: 40px;
 width: 125px;
 height: 34px;
 border: 1px solid black;
 overflow: hidden;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}