How to customize a select arrow

Question

How to customize a select arrow

Navigation

#1 by (5 votes)

8

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

beingthatIdidwithCSS:

-webkit-appearance:none;background:#E9E9E9url("../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 as the second image and that works in all browsers, maybe I can do with JavaScript?

javascript css select

asked by anonymous 01.05.2014 / 21:57

1 answer

Regex to select specific section Why does Value in Spring MVC require an asterisk?

score 5 · Answer 1

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

Current Browser Support:

Atthemoment,itisveryimportanttomaintainafallback,butyoucanincreasesupportbyalsoaddingtheprefix-moz.

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

Some developers include the select tag inside 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 can increase compatibility, although it is not yet a cross-browser solution.

Or, use a JavaScript library like Select2 .