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>