11 5563-9074
Orçamento

Personalizando campos select com CSS e Javascript

CSS - Personalizar 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 */
.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 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
Autor: Arthur Di Polito
Criação e Diagramação