Lets say i have the following Button
button {
background-color: #fff;
border: 1px solid #122e45;
border-radius: 5px;
font-size: 12px;
margin-right: 5px;
outline: medium none;
padding: 7px 30px 7px 10px;
position:relative;
}
button i{
right: 10px;
top: 10px;
position:absolute;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<button>SomeButton <i class="fa fa-angle-down"></i></button>
How do i recreate this one as Select ? Because some simple
select {
background-color: #fff;
border: 1px solid #122e45;
border-radius: 5px;
font-size: 12px;
margin-right: 5px;
outline: medium none;
padding: 7px 30px 7px 10px;
position:relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
</style>
<select>
<option selected="selected">Relevanz <i class="fa fa-angle-down"></i></option>
<option>Datum <i class="fa fa-angle-down"></i></option>
</select>
doestn work at all
I already checked Font Awesome but there is no example given for this problem