How to remove the default arrow(from the browser) in the select tag?

Question

I’m making a < select > customizable. The problem is the different renderings that happen in browsers. In fact, you just need to hide the arrows that appear:

in IE:

and in the FF:

In Chrome and Opera they were hidden (Same rendering engine).

Thank you!

Answer 1

In that gist there are several proposals to resolve this bug reported a long time ago. I remember using the property moz-appearance:none a few months ago and have worked, went to create an example to answer this question and... SURPRISE, stopped working on recent updates of Firefox.

1st Proposal

Create a parent element with defined width and overflow:hidden (to hide what exceeds the limit). And, no select, define a width greater than that of the parent element. For example:

.select {
    border: 1px solid #ccc; /*para "contornar" o select*/
    display: block;
    overflow: hidden;
    width: 350px
}

.select > select {
    border: none;
    padding: 5px;
    width: 110% /* 10% para esconder a seta :) */
}

<span class='select'>
    <select>
        <option disabled selected>Selecione um destino</option>
        <option>São Paulo</option>
        <option>Rio de Janeiro</option>
        <option>Tangamandapio</option>
    </select>
</span>

2nd Proposal

Another alternative is to create a custom component and this does not have a proper way to be done, each developer will do it the way it suits. But here’s an example I got using much gambit Font Awesome to change the default arrow and z-index to control the positioning of the elements:

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box
}

/* Esconder no IE 10 */
select::-ms-expand {
  display: none 
}

/* Outros navegadores */
select {
  -webkit-appearance: none;
          appearance: none
}

select:focus {
  outline: none;
}

/* Caixa em volta do select */
.select {
  position: relative;
  width: 500px;
  z-index: 1
}

/* A seta */
.select:before { 
  display: block;
  font-family: 'FontAwesome';
  height: 100%;
  position: absolute;
  top: 0; right: 0;
  width: 1em;
  z-index: -1
}

.select > select {
  display: block;
  margin: 0;
  padding: .5em;
  width: 100%;
}

/**
 * Pseudo-class 'any', referência:
 * https://developer.mozilla.org/en-US/docs/Web/CSS/:any */
:-moz-any(.select):before {
  background-color: #fff;
  pointer-events: none;
  z-index: 1;
}

/**
 * O código abaixo não tem relevância, o único propósito
 * é tornar o exemplo 'apresentável' esteticamente. */
.select {
  background-color: #fff;
  border: 1px solid #ccc;
  margin: 0 0 2em;
  padding: 0;
}

.select:hover {
  border-color: #333;
}

.select:before {
  color: #333;
  font-size: 1em;
  line-height: 2.5em;
  padding: 0 0.625em;
  text-align: center;
}

.select > select {
  background-color: transparent;
  border: 0 none;
  box-shadow: none;
  color: #333;
  font-size: 100%;
  line-height: normal;
}

<link rel='stylesheet' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'/>

<div class='select fa-caret-down'>
    <select name=''>
        <option selected disabled>Esporte Favorito</option>
        <option>Basquete</option>
        <option>Futebol</option>
        <option>Volei</option>
        <option>Outro</option>
    </select>
</div>

3rd Proposal (the best)

In my opinion The best thing to do so far (i.e. while it is not possible to guarantee that the CSS rule will affect the appearance of select) is to use a plugin that guarantees to display the same output regardless of the browser user, such as:

Jquery Selectbox plugin
Custom Select
Selectboxit
Fancyselect

That page has several other plugins for the same purpose.

Answer 2

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