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

Question

so i can't figure how i change the dropdown arrow, i need to change it to another arrow:
Original
How I want it to look like
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 1

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.

Answer 2

Try the below code.
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("recursos/images/span/seta.png");
background-repeat: none;
background-position: right center;
}

Answer 3

Check this fiddle here
You have to make some changes in CSS and try to use a parent container for styling select as,
Your CSS,
select {
font-family: 'Hind Madurai','Segoe UI','Helvetica Neue', sans-serif;
background:#F9F9F9;
color:#111111;
border:1px solid #CCCCCC;
border-radius:5px;
padding: 8px 15px;
font-size:15px;
letter-spacing:0.05em;
width:300px;
margin: 0 0 20px 0;
max-width: 100%;
resize: none;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.paistofill select {
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
background:url(https://s31.postimg.org/9rchnwbwr/down_arrow.png) no-repeat #F9F9F9;
background-position: 96% 12px;
text-indent: 0.01px;
text-overflow: "";
}
.paistofill select option {
background:#FFFFFF;
color:#111111;
}