Programação

Personalizar Dropdown com CSS

Salve salve galáxia, hoje vou mostrar pra vocês como estilizar e personalizar dropdown com CSS. Todos sabemos que os selects vem com um estilo padrão das setas, que dependem do tipo de navegador que o visitante está usando e muitas vezes precisamos estilizar esses dropdowns pra deixa-los com visual mais atraente.

Veja o exemplo

Estilizar e personalizar dropdown com CSS

Bom como o título do post mesmo diz, usaremos apenas CSS para personalizar o select e a lógica é a seguinte, criar uma div com 20px a menos que o tamanho (widht) do dropdown e usar uma nova seta como background.

1º Passo – O HTML

Bom, como já disse acima, vamos criar uma div pra colocar o select dentro dele, então nosso código ficará assim.

HTML

<div class="dropdown">
        <select>
        <option>Selecione uma opção</option>
         <option>Segunda-Feira</option>
         <option>Terça-Feira</option>
         <option>Quarta-Feira</option>
         <option>Quinta-Feira</option>
         <option>Sexta-Feira</option>
         <option>Sábado</option>
         <option>Domingo</option>
       </select>
</div> <!-- DropDown -->

Como vimos no código assim, adicionamos uma classe chamada dropdown para nossa div, então, vamos personalizar agora o CSS da div e do select

2º Passo – O CSS

CSS

.dropdown {
	width:200px;  /*Tamanho final do select*/
	overflow:hidden; /*Oculta conteúdo que passar do tamanho do width*/
}
.dropdown select {
      border: 0 !important;  /*Remove bordas*/
      -webkit-appearance: none;  /*Remove estilo padrão do Chrome*/
      -moz-appearance: none; /* Remove estilo padrão do FireFox*/
      background: url("https://cdn4.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat scroll 88% center #eee;  /* Imagem de BG*/
      background-position: 88% center;  /*Posição da imagem do background*/
      width: 220px; /* tamanho do select, maior que o tamanho do width da classe dropdown */
      height:25px; /* altura do select*/
      text-indent: 0.01px; /* Remove seta padrão do FireFox */
      text-overflow: "";  /* Remove seta padrão do FireFox */
      -webkit-box-shadow: 0 2px 10px 0 rgba(50, 50, 50, 0.75) inset; /* sombras internas do select para Chrome*/
      -moz-box-shadow: 0 2px 10px 0 rgba(50, 50, 50, 0.75) inset; /* sombras internas do select* para FireFox*/
      box-shadow: 0 2px 10px 0 rgba(50, 50, 50, 0.75) inset; /* sombras internas do select padrão*/	
      color: #000; /* cor da fonte */
      select::-ms-expand { display: none; }/* Remove seta padrão do IE*/
}

O código acima esta inteiro comentado, o que faz com que eu não precise explicar passo a passo o que ele faz, então, você pode alterar pra deixar da maneira que você precisa.

Clique aqui e veja o exemplo
Clique aqui e veja o código completo no GitHub
Clique aqui e faça download do arquivo do exemplo.

Pronto, agora você já sabe como personalizar dropdown com CSS, esse código foi testado no IE7, IE8, IE9, IE10, Chrome e Firefox, e você o que achou do tutorial? Comente

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    Envie seu comentário.

    Seu email não será publicado