I am dealing with a select option markup that looks like this
<div class="styleselect">
<select onchange="setLocation(this.value)" class="selections">
<option selected="selected" value="position">Position</option>
<option value="name">Name</option>
<option value="price">Price</option>
</select>
</div>
My goal is to customize the default arrow of the select option, so I made changes to my CSS like this
.styleselect {
background-color: #DFD3C3;
background-image: url("http://s21.postimg.org/nx05vn15f/dropdown_style.png");
background-position: 117px center;
background-repeat: no-repeat;
border: 1px solid #C5AF8A;
overflow: hidden;
vertical-align: middle;
width: 140px;
padding: 0;
margin: 0;
display: inline-block;
}
.styleselect select {
background-color: transparent;
margin: 0 0 1px;
padding: 4px;
vertical-align: middle;
width: 190px;
}
It worked well initially. However, I encountered a problem where clicking on the options caused them to expand beyond their original width, which looked unappealing. I realized that the extra width was due to the styling in .styleselect select, where I added the "extra width" for the arrow customization. Can someone please advise me on how to correct this issue and ensure that my custom arrow replaces the default one without causing any extra width for the options? You can view the fiddle link here
Any assistance or suggestions would be greatly appreciated. Thank you.