styling-a-select-tag.md

Styling a select tag can be difficult.

Here are some styles that make it okay looking without having to resort to turning it into a ul and using js to handle interaction.

<span class="custom-dropdown">
  <select class="custom-dropdown__select">
    <option value="option1">Option 1</value>
    <option value="option2">Option 2</value>
    <option value="option3">Option 3</value>
  </select>
</span>

.custom-dropdown {
  background-color: $base-background-color; // white
  border: $base-border; // 1px solid #ccc
  border-radius: $base-border-radius; // 3px
  display: inline-block;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  vertical-align: middle;

  &::after {
    content: '\25BC';
    font-size: $xxxs-font-size; // 14px
    line-height: $solid-line-height; // 1
    margin-top: -.5em;
    position: absolute;
    right: 1.2em;
    top: 50%;
  }

  &:focus {
    outline: none;
  }
}

.custom-dropdown__select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 0;
  padding-left: .5em;
  padding-right: 1.5em;
}