Andre FIlipe Andre FIlipe - 4 months ago 17
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:

Original

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

<select>
.

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>
(...)
</select>


The CSS:

select{
-webkit-appearence:none;
background-image:url("recursos/images/span/seta.png");
background-repeat:none;
background-position:right center;

}


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

JSFiddle

Answer

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 https://harvesthq.github.io/chosen/chosen-sprite.png

So change background to your image.