Styling select-dropdowns [2]

Follow up: Styling select-dropdowns

Another way would be:

The markup:

<div class="form-item">
<label for="subject">Subject*</label>
<select name="subject" id="subject">
<option value="">Choose</option>
<option value="1">wisely you must</option>
<option value="2">young padawan</option>
</select>
<svg class="icon icon--arrow">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/sprites.svg#icon--arrow"></use>
</svg>
</div>

The CSS:

.form-item {
position: relative;
}
.icon {
position: absolute;
right: 0.75rem;
bottom: 0.75rem;
pointer-events: none;
}
select {
width: 100%;
border: 3px solid grey;
appearance: none;
}