Como personalizar o campo Select apenas com CSS

Alterando a aparência de formulários é relativamente fácil. O problema é quando queremos alterar a seta do campo select. Nâo há muito material falando sobre isso, mas sabendo o que fazer é realmente fácil alterar, então vamos lá

Especificamente nesse caso usaremos uma combinação de atributos para que funcione bem em qualquer navegador atual, a opção é o appearance, mas também usaremos o -moz-appearance para funcionar no Mozila Firefox  e o -webkit-appearance pra funcionar no Chrome e em outros. Vamos desligar a aparência de select para este campo colocando none.

Fica assim:

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

Com isso resetamos a aparência do nosso select, agora vamos adicionar código para alterar sua aparência

Adicionamos um padding-right para que gere um preenchimento que ficará reservado para a seta que será um png que fica no background, porquestão de alinhamento esse png tem que ter espaços no topo e na direita pra não ficar colado na lateral e topo, por exemplo este: .

O código completo fica assim:

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url(../images/select-angle-down.png) no-repeat center right #FFF;
    border: 1px solid #333;
    font-size: 15px;
    padding-right: 20px;
}

Se você já conhece css esse restante do código dispensa explicação. A borda, cor de fundo e tamanho da fonte ficam por conta do seu layout.

então esse é uma dica bem rápida espero que tenha ajudado

Até a próxima.