Personalizando campos select com CSS e Javascript
CSS - Personalizar campos select com CSS e JavascriptUma das principais dificuldades ao se personalizar um formulário é a configuração do campo SELECT pois ela varia de acordo com o navegador que o visitante está utlizando. Neste artigos vamos mostrar alguns dos principais métodos utilizados para criar uma configuração personalizada para o SELECT.
Obs: A finalidade de cada função CSS é explicada diretamente no comentário junto ao código.
Método com CSS "appearance"
Considerado o método mais "correto" por utilizar somente o css diretamente no campo SELECT, seu maior problema se deve ao fato de ser suportado por apenas alguns navegadores (Chrome, Firefox e Safari), não tendo efeitos nos demais navegadores.
<select id="appearance-select">
<option>Selecione</option>
<option>Primeira opção</option>
<option>Segunda opção</option>
<option>Terceira opção</option>
<option>Quarta opção</option>
</select>
CSS
#appearance-select {
-webkit-appearance: none;
/* Remove estilo padrão do Chrome */
-moz-appearance: none;
/* Remove estilo padrão do FireFox */
appearance: none;
/* Remove estilo padrão do FireFox*/
background: url(http://www.webcis.com.br/images/imagens-noticias/select/ico-seta-appearance.gif) no-repeat #eeeeee;
/* Imagem de fundo (Seta) */
background-position: 218px center;
/*Posição da imagem do background*/
width: 250px;
/* Tamanho do select, maior que o tamanho da div "div-select" */
height: 30px;
/* Altura do select, importante para que tenha a mesma altura em todo os navegadores */
border: 1px solid #ddd;
}
Resultado
Obs: Caso não esteja conseguindo visualizar a personalização, acesse a página com algum dos navegadores citados acima.
Método com DIV e CSS "overflow:hidden"
Um dos métodos mais utilizados, ele consiste em "esconder" a área da seta do campo SELECT utilizando um elemento DIV, do HTML, com "overflow:hidden" em volta do campo e aumentando a largura do campo até que a seta não esteja mais aparecendo, permitindo que a seta personalizada seja colocada utilizando uma imagem no background do SELECT.
<div class="div-select">
<select>
<option>Selecione</option>
<option>Primeira opção</option>
<option>Segunda opção</option>
<option>Terceira opção</option>
<option>Quarta opção</option>
</select>
</div>
CSS
.div-select {
width: 250px;
/* Tamanho final do select */
overflow: hidden;
/* Esconde o conteúdo que passar do tamanho especificado */
}
.div-select select {
background: url(http://www.webcis.com.br/images/imagens-noticias/select/ico-seta-select.gif) no-repeat #354880;
/* Imagem de fundo (Seta) */
background-position: 205px center;
/*Posição da imagem do background*/
width: 270px;
/* Tamanho do select, maior que o tamanho da div "div-select" */
height: 48px;
/* altura do select, importante para que tenha a mesma altura em todo os navegadores */
font-family: Arial, Helvetica, sans-serif;
/* Fonte do Select */
font-size: 18px;
/* Tamanho da Fonte */
padding: 13px 20px 13px 12px;
/* Configurações de padding para posicionar o texto no campo */
color: #fff;
/* Cor da Fonte */
text-indent: 0.01px;
/* Remove seta padrão do FireFox */
text-overflow: "";
}
/* Remove seta padrão do FireFox */
.div-select select::-ms-expand {
display: none;
}
/* Remove seta padrão do IE*/
Resultado
Método Javascript
Este é o método mais confiavel atualmente pois ele permite que a personalização funcione em todos os navegadores sem problemas de compatibilidade. Existem diversos sites que fornecem scripts para a apersonalização de campos SELECT. Segue abaixo uma lista com alguns dos principais scripts para a personalização do campo SELECT:
• SelectBox (http://marcj.github.io/jquery-selectBox/);
• ComboBox (http://www.marghoobsuleman.com/jquery-image-dropdown);
• LinkSelect (http://www.givainc.com/labs/linkselect_jquery_plugin.cfm);
• SearchBox (http://tympanus.net/codrops/2010/07/14/ui-elements-search-box/);
• Chosen (http://harvesthq.github.io/chosen/)
Criação e Diagramação
