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]