Styling select-dropdowns [1]

Styling select-dropdowns #

// @see: – Styling form elements

This is a similar approach keeping the select element focusable (via keyboard / tab).

The markup: #

  <label for="chooser">Choose it</label>
  <div class="fake-select">
    <select id="chooser" name="choosychoose">
      <option value="">Choose</option>
      <option value="1">wisely you must</option>
      <option value="2">young padawan</option>

The CSS: #

.fake-select {
  margin-bottom: 1.125rem;
  background: url('path/to/icon.svg') no-repeat right center;
  background-size: 10px;
  overflow: hidden;

  select {
    background: transparent;
    margin: 0;

Styling Choose