Basic (Pure CSS) Dropdowns, Material Design Style

_basic_dropdowns.scss

.basic-dropdown {
  border-bottom: 1px solid rgba(41, 70, 97, 0.2);
  position: relative;
  max-width: 230px;
  padding-top: 8px;
  background-color: transparent;
  transition: .5s border-color;
  label {
    font-size: 12px;
    top: -14px;
  }
  &.sg-input-container {
    margin-top: 21px;
  }
  &.basic-dropdown-error {
    border-color: $invalid-input-border;
    border-width: 2px;
  }
}

.basic-dropdown select {
  background-repeat: no-repeat;
  background-color: transparent;
  background-image: url('../images/misc-icons/caret_hack.png'); // This should point to whatever image you want to use for carets
  background-position: right center;
  box-shadow: none;
  color: rgba(40, 70, 99, 0.6);
  -webkit-appearance: none; // Removes 'handles' from Webkit select so we can add our own caret
  -moz-appearance: none; // Removes 'handles' from Firefox select so we can add our own caret
  -moz-margin-start: -3px;
  border: 0;
  padding-bottom: 0;
  padding-left: 0;
  &::-ms-expand {
    display: none;
  }
  &[disabled] {
    background-color: transparent;
    color: rgba(40, 70, 99, 0.4);
  }
}