Follow up: Styling select-dropdowns Another way

Leipzig, Germany

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;
}