Andre FIlipe Andre FIlipe - 1 year ago 63
CSS Question

How do I change the arrow in the select with Chosen plugin?

so i can't figure how i change the dropdown arrow, i need to change it to another arrow:


enter image description here

How I want it to look like

enter image description here

I am using Chosen plugin, i don't know if that effects in general my edits on


Heres the php:

<div class="paistofill">

<select class="form-control bfh-countries chosen-select " data-country="PT">
<option value="PT">Portugal</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>

The CSS:

background-position:right center;


I though this would do the trick. Nothing changed, what can I do?


Answer Source

There is this class in chosen.css

.chosen-container-single .chosen-single div b {
    display: block;
    width: 100%;
    height: 100%;
    background: url('chosen-sprite.png') no-repeat 0px 2px;

With this image

So change background to your image.