Check out this customized solution I put together. It might be useful for you.
Codepen demonstration
<div class="special-rate">
<fieldset>
<select id="duration-select" class="duration" tabindex="-1">
<option value="1" selected="">1 year</option>
<option value="2">2 years</option>
<option value="3">3 years</option>
<option value="4">4 years</option>
<option value="5">5 years</option>
</select>
<span class="ion-arrow-down-b"></span>
</fieldset>
</div>
I've included some JavaScript for various interactions. Make sure to also check out the associated CSS.
$("#duration-select").blur(function() {
console.log('blur');
$('.special-rate').removeClass('highlight-special');
$('.special-rate fieldset span').addClass("ion-arrow-down-b");
$('.special-rate fieldset span').removeClass("ion-arrow-up-b");
});
$("#duration-select").change(function() {
if ($('.special-rate fieldset span').hasClass('ion-arrow-up-b')) {
this.selectionChanged = true;
}
console.log('change');
$('.special-rate fieldset span').addClass("ion-arrow-down-b");
$('.special-rate fieldset span').removeClass("ion-arrow-up-b");
});
$("#duration-select").click(function() {
console.log('click');
if (this.selectionChanged) {
this.selectionChanged = false;
return;
}
if ($('.special-rate fieldset span').hasClass('ion-arrow-up-b')) {
$('.special-rate fieldset span').addClass("ion-arrow-down-b");
$('.special-rate fieldset span').removeClass("ion-arrow-up-b");
} else {
$('.special-rate fieldset span').addClass("ion-arrow-up-b");
$('.special-rate fieldset span').removeClass("ion-arrow-down-b");
}
$('.special-rate').addClass('highlight-special');
});
$("#duration-select").on('keypress', function(e) {
if (e.charCode != 13 && e.charCode != 10) {
return;
}
console.log('keypress');
if (this.selectionChanged) {
this.selectionChanged = false;
$('.special-rate').addClass('highlight-special');
$('.special-rate fieldset span').addClass("ion-arrow-down-b");
$('.special-rate fieldset span').removeClass("ion-arrow-up-b");
} else {
$('.special-rate').addClass('highlight-special');
$('.special-rate fieldset span').addClass("ion-arrow-up-b");
$('.special-rate fieldset span').removeClass("ion-arrow-down-b");
}
});