How can I style the <select> arrow in Firefox?

Question

I have this little problem. I have a layout that needs to be exactly as they passed me, within them the definitions of the type text and select.

In Google Chrome, everything worked beautifully, since the arrow was cute, as in the example:

.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>

Result in Google Chrome:

In Firefox, in turn, the arrow is rendered this way:

How to style this arrow from <SELECT> to stay the same in all browsers?

Answer 1

Simply purely with CSS does not give, you will have to simulate the arrow maybe with an image via background, it is necessary to remove the decoration of the element using appearance: (with prefixes still)

This is because the form controls are usually generated "from" native "operating system" controls and for many times this is not fully customizable as the engine does not pass or cannot "pass" the whole control, or is something that has not yet been developed to be its own control instead of the native in the system.

I made an example with an SVG image, the right alignment is more complex if the <select> use width: 100%; (or based on percentage), then the cool would be to add the spaces in the image itself, in case follows a simple example:

.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>

Answer 2

I’ll make a contribution. I’ve solved this using a "wrapper" class around a select, where I remove all the style of this. In this "wrapper" I use the pseudo-element ::after to create the arrow (with the SVG @Guilhermenascimento specified or even with a character).

See how it would look

.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>

Just to complement: the reason for putting pointer-events: none is here.