How to customize the arrow of a select

Question

I have a price list, it has a select for the person to choose the payment cycle as shown in the image:

which I did with CSS:

-webkit-appearance:none; 
background:#E9E9E9 url("../imagens/bgs/seta.png") 95.5% 50% no-repeat;

As shown in this image only works in Google Chrome:

I would like to do the same of the second image and that works in all browsers, maybe I can do with Javascript?

Answer 1

Unfortunately it is still not possible to do this in the "right way" on all browsers, since the property appearance is not ubiquitous.

Support from current browsers:

For now, it’s important to maintain a fallback, but you can increase support by also adding the prefix -moz.

-webkit-appearance: none;
-moz-appearance:    none;
appearance:         none;

---

Some developers include the tag select within a div and stylize it, as in the example:

<div class="select">
  <select>
    ...
  </select>
</div>

select {
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
  width: 100%;
}

.select {
  ...
  background: #e9e9e9 url('../imagens/bgs/seta.png') 95.5% 50% no-repeat;
  ...
}

This method may increase compatibility, although it is not yet a solution cross-browser.

---

Or, use a Javascript library like Select2.