Style SELECT (Pure CSS)

Style <select> element using pure CSS. Full support in Firefox, Chrome, IE 10+ and graceful degradation for other browsers.

HTML

<select>
  <option>Item One</option>
  <option>Item Two</option>
</select>

CSS

body {
  font-family: Arial, sans-serif;
  font-size: 14px;
  position: absolute;
}

select {
  border: 1px solid #ccc;
  height: 26px;
  line-height: 18px;
  margin: 0;
  padding: 3px;
  background: transparent none no-repeat;
  cursor: pointer;
}

@media screen and (min-width:0) {
  /* for relatively modern browsers including IE 8+ */
  select {
    border-radius: 4px;
    background-image: url("data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaCAYAAACkVDyJAAAAlElEQVRIx+2VwQ3AIAhFwTiFi7KC7uYGHo1z0Et7MWkjaEiaQOJBDzy/wgdqrXwHWKyAiGAZDnSgHBhC+IfCUgqbKXxgGqhY4QyRQkUK35KLoK01iZd+xZKXRuEfbvdQPPGkAABEhMeLhohE5yfaAufk93791r13zQDmnLNqcOMYg1NKmoJgTRHtmDeaWZvPQweaAi8PXSmZJU3QRAAAAABJRU5ErkJggg==");
    background-position: -150px -150px;
  }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* for Webkit */
  select {
    -webkit-appearance: none;
    background-position: right center;
    padding: 3px 32px 3px 5px;
  }
}

@-moz-document url-prefix() {
  /* for Firefox */
  select {
    display: flex;
    border: 1px solid red;
    box-shadow: inset 0 0 1px #000;
    padding: 0;
    background-position: right center;
    padding-right: 16px;
    color: transparent;
    /* this shifts the text down a few pixels and removes the focus-ring */
    text-shadow: 0 4px 0 #000;
    text-indent: 2px;
  }
  select * {
    color: green;
    text-shadow: none;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* for IE10+ */
  select::-ms-expand {
    display: none;
  }
  select {
    background-position: right center;
    padding-right: 30px;
  }
}