WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação e de sites

Personalizando campos select com CSS e Javascript

Publicidade

Uma 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 esses campos.

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.

HTML

<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 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.

​HTML

<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 */      
      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 dos campos:

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/)

Publicidade
Postado por: Arthur Di Polito
Criação e Diagramação 

 

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]