Alright, let's break it down:
- I have a custom styled
<select>element - I want to display an up arrow (possibly a Bootstrap Glyphicon) on the right side of its transparent background
The problem at hand:
- The icon appears correctly (though in the fiddle it looks like a square icon, but that's not a big deal)
- However, when I click on the icon, the select option doesn't get triggered - this is incorrect behavior.
Any thoughts or suggestions?
HTML:
<div id="styled-select">
<select>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</div>
CSS:
select {
border:0;
border-radius: 0;
background:transparent;
outline:none;
box-shadow:none;
-webkit-box-shadow:none;
text-align:right;
-webkit-appearance: none;
padding-top: 1px;
font-size: 13px;
padding-left: 10px;
}
#styled-select:hover {
color: #666;
}
#styled-select:after {
content:"\e113";
font-family:"Glyphicons Halflings";
line-height:1;
display:inline-block;
margin-left:5px;
}
Demo/Fiddle: http://jsfiddle.net/tnzbL1hp/