2

Estou com esse pequeno problema. Tenho um layout que precisa estar exatamente como me passaram, dentro eles as definições dos input do tipo text e select.

No Google Chrome, funcionou tudo maravilhosamente, já que a seta ficou bonitinha, como no exemplo:

.form-control
{
    background-color: #fff;
    border-radius: 15px;
    border: 2px solid #ccc;
    font-size: 16px;
    margin-top: 5px;
    min-height: 57px;
    outline: none;
    padding: 15px 10px;
    transition: border-color .1s linear;
    width: 100%;
    box-sizing: border-box;
}
<input class="form-control" />


<select class="form-control">
</select>

Resultado no Google Chrome:

Google Chrome input select

No Firefox, por sua vez, a seta é renderizada dessa forma:

Firefox input select

Como estilizar essa seta do <SELECT> para ficar igual em todos os navegadores?

2 Respostas 2

2

Simplesmente puramente com CSS não dá, você terá que simular a seta talvez com uma imagem via background, é necessário remover a decoração do elemento usando appearance: (com prefixos ainda)

Isso ocorre porque os controles de formulários são geralmente gerados a "partir" de controles nativos "sistema operacional" e por muitas vezes isso não é totalmente customizável, pois o motor não passa ou não "pode passar" o controle todo, ou é algo que ainda não foi desenvolvido para ser um controle próprio ao invés do nativo no sistema.

Fiz um exemplo com uma imagem SVG, o alinhamento para direita é mais complexo se o <select> usar width: 100%; (ou baseado em porcentagem), então o legal seria adicionar os espaços na própria imagem, no caso segue um exemplo simples:

.form-control
{
    background-color: #fff;
    border-radius: 15px;
    border: 2px solid #ccc;
    font-size: 16px;
    margin-top: 5px;
    min-height: 57px;
    outline: none;
    padding: 15px 10px;
    transition: border-color .1s linear;
    width: 100%;
    box-sizing: border-box;
 }

 select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none; /*provavelmente será implementado no futuro*/

    background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzA2cHgiIGhlaWdodD0iMzA2cHgiIHZpZXdCb3g9IjAgMCAzMDYgMzA2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDYgMzA2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBvbHlnb24gcG9pbnRzPSIyNzAuMyw1OC42NSAxNTMsMTc1Ljk1IDM1LjcsNTguNjUgMCw5NC4zNSAxNTMsMjQ3LjM1IDMwNiw5NC4zNSIvPjwvZz48L3N2Zz4=) center right no-repeat;

   background-size: 8px 8px;
}
<input class="form-control" />


<select class="form-control">
</select>

3
  • 1
    Guilherme, o estilo não é pra ser aplicado ao select? select {}...
    – Marconi
    25/10/2017 às 15:01
  • 1
    @Marconi é sim, esqueci de "delimitar" o seletor. Obrigado, já corrigi 25/10/2017 às 15:02
  • 1
    Sensacional, acabei de aplicar no meu projeto. 25/10/2017 às 15:55
1

Vou dar uma contribuição. Eu resolvi isso utilizando uma classe "wrapper" em torno de um select, onde removo todo o estilo deste. Nesse "wrapper" eu utilizo o pseudo-elemento ::after para criar a setinha (com o SVG que o @GuilhermeNascimento indicou ou mesmo com um caractere).

Vejam como ficaria

.my-select{
   border: 1px solid #aaa;
   border-radius: 4px;
   display: inline-block;
   position:relative;
   width: 100%;
}

.my-select:after{
   content: ' ';
   background-image: url("data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzA2cHgiIGhlaWdodD0iMzA2cHgiIHZpZXdCb3g9IjAgMCAzMDYgMzA2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDYgMzA2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBvbHlnb24gcG9pbnRzPSIyNzAuMyw1OC42NSAxNTMsMTc1Ljk1IDM1LjcsNTguNjUgMCw5NC4zNSAxNTMsMjQ3LjM1IDMwNiw5NC4zNSIvPjwvZz48L3N2Zz4=");
   background-position: center;
   background-size: 50%;
   background-repeat: no-repeat;
   position: absolute;
   height: 100%;
   width: 25px;
   top: 0;
   right: 0;
   margin: 5px;
   pointer-events: none;
}

.my-select > select{
   -moz-appearance: none;
   -webkit-appearance: none;
   -ms-appearance: none;
   border: none;
   width: 100%;
   height: 100%;
   padding: 15px 10px;
   background-color: transparent;
}
<span class="my-select">
    <select>
       <option>um</option>
       <option>um</option>
       <option>um</option>
    </select>
</span>

Só para complementar: o motivo de colocar pointer-events: none está aqui.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .