// CSS only - custom-styled - select by Tod Parker
// http://jsbin.com/telegu/1/edit?html,output
label {
  display: block;
  margin-top: 2em;
  font-size: .875em;
  color: #bbb;
}
.styleswitcher {
  position: relative;
  display: block;
  margin: .5em 0 .5em;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}
select {
  // Make sure the select is wider than the container so we can clip the arrow
  width: 110%;
  max-width: 110%;
  min-width: 110%;
  // Remove select styling
  appearance: none;
  -webkit-appearance: none;
  // Ugly Firefox way of doing it
  -moz-appearance: window;
  text-indent: 0.01px;
  text-overflow: "";
  // Magic font size number to prevent iOS text zoom
  font-size:16px;
  font-weight: normal;
  background: none;
  border: none;
  color: #ddd;
  // color: #fff;
  letter-spacing: 1px;
  outline: none;
  // Padding works surpringly well
  padding: .4em 19% .4em .8em;
  line-height: 1.2;
  margin: .2em;
}

// This hides native dropdown button arrow in IE
select::-ms-expand {
  display: none;
}

// Custom arrow - could be an image, SVG, icon font, etc.
.styleswitcher:after {
  background: none;
  // color: #bbb;
  color: #999;
  content: "\25BC";
  font-size: .7em;
  padding:0;
  position: absolute;
  right: 1em;
  top: 1.2em;
  bottom: .3em;
  z-index: 1;
// This hack makes the select behind the arrow clickable in some browsers
  pointer-events:none;
}
// [class*=".dark"] .styleswitcher:after {
//   color: #999;
// }

// Hover style - tricky because we're clipping the overflow
.styleswitcher:hover {
  border:1px solid #888;
}

// Focus style
select:focus {
  outline: none;
  box-shadow: 0 0 3px 3px rgba(180,222,250, .85);
}

// This hides focus around selected option in FF
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
select * {
  background: #eee;
}
// These are just demo button-y styles, style as you like
.button {
  // border: 1px solid #bbb;
  // border-radius: .3em;
  // box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  // background: #f3f3f3;
  // background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
  // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
}
// [class*=".dark"]
.button {
  background: #111;
  background: linear-gradient(to bottom, #333 0%, #222 100%); /* W3C */
  border: 1px solid #000;
  border-radius: .25em;
}