Does the select
tag allows to use the :after
selector in order to create a pseudo element after it?
I've tried on Chrome, Safari and Firefox on Mac and it doesn't seem to work.
Here is a compromise that I have used. http://jsfiddle.net/pht9d295/3/
<div class="select-wrapper">
<select>
<option>United Kingdom</option>
<option>Canada</option>
<option>United States</option>
</select>
</div>
And CSS
body {
background-color: #f6f6f6;
padding: 10px;
}
.select-wrapper {
background-color: #FFF;
display: inline-block;
position: relative;
}
.select-wrapper:after {
content:"\f078";
font-family:'FontAwesome';
position: absolute;
top: 13px;
right: 10px;
z-index: 5;
}
select {
padding: 10px 40px 10px 10px;
-webkit-appearance: none;
-ms-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #bbb;
background-color: transparent;
border-radius: 0;
position: relative;
cursor: pointer;
z-index: 10;
}