.currency-selector-symbol {
  min-width: 2.5em;
  text-align: center;
}

.currency-selector {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding-left: .5rem;
  border: 0;
  background: transparent;

  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;

  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1024' height='640'><path d='M1017 68L541 626q-11 12-26 12t-26-12L13 68Q-3 49 6 24.5T39 0h952q24 0 33 24.5t-7 43.5z'></path></svg>") 90%/12px 6px no-repeat;

  font-family: inherit;
  color: inherit;

  &:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
  }
}

.currency-selector-amount {
  text-align: right;
}

.currency-selector-addon {
  width: 5em;
  text-align: left;
  position: relative;
}

.currency-selector-symbol {
  min-width: 2.5em;
  text-align: center;
}

.currency-selector {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 2rem;
  padding: 0 .75rem;
  border: 0;

  background-color: #fff;
  background-image: none;

  font-family: inherit;
  color: inherit;

  &:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
  }

  // Unstyle the caret on `<select>`s in IE10+.
  &::-ms-expand {
    background-color: transparent;
    border: 0;
  }


  &:hover:not(:active) {
    cursor: pointer;
  }
}

.currency-selector-amount {
  text-align: right;
}

.currency-selector-addon {
  width: 5rem;
  text-align: left;
  position: relative;
}

Simplify styling of currency selector
Simplify styling of currency selector

Instead of entirely styling from scratch, we try to bend the browser's
internal styles to match. This avoids needing an SVG background for the
select's dropdown, and matchces bootstrap's styling of select boxes.
