eternalistic
9/4/2014 - 11:22 PM

CSS Styled Select List - Notera

CSS Styled Select List - Notera

// On change update label to reflect change 
$(".field-fieldname select").change(function() {
  var selectedPhoneVal = $(".field-fieldname option:selected").html();
  $(".field-fieldname select").siblings('label').text(selectedPhoneVal);
});

// Dropdown
.form-dropdown {
  background: $white-250;
  border: 1px solid $gray-210;
  color: $gray-150;
  cursor: pointer;
  height: 42px;
  max-width: 100%;
  padding: 8px 12px;
  position: relative;
  vertical-align: middle;
  width: 250px;

  @include border-radius(5px);

  // Transitions
  transition: background 0.15s ease-in-out 0s;

  &:hover,
  &:focus,
  &:active {
    background: $white;
    border: 1px solid $blue-100;
    border: 1px solid rgba($blue-100, .5);
    color: $gray-70;

    i,
    label {
      color: $darkblue-47;
    }
  }

  i {
    font-size: em(20px);
    position: absolute;
    right: 12px;
  }

  label {
    color: $gray-150;
    font-weight: 100;
    white-space: nowrap;
  }

  select {
    cursor: pointer;
    font-size: 16px;
    height: 42px;
    left: 0;
    line-height: 42px;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;

    -webkit-appearance: menulist-button;
  }

}
<div class="form-item field-fieldname">        
  <label>Label name <span class="form-required">*</span></label>
  <div class="form-dropdown">
    <label class="inline"></label>
    <i class="icon-angle-down right"></i>
    <select>
      <option>Option 1</option>
    </select>
  </div>
</div>