I am looking to update the appearance of the arrow on a select option. By default, it is styled as caret-down. When a user clicks in the input area, I want to change the style to caret-up. If the select option has been changed or no action has been taken, then revert back to the default style.
Here is my HTML :
<div class="form-group row">
<div id="select" class="col arrow-down">
<select name="idBengkel" class="form-control custom-select" required>
<option value="" disabled selected>Select Item</option>
<?php foreach($bengkel as $row):?>
<option value="<?= $row['idBengkel'];?>"><?= $row['nmBengkel'];?></option>
<?php endforeach;?>
</select>
</div>
</div>
This is my CSS :
.custom-select{
position:relative !important;
background: transparent !important;
-webkit-appearance: none;
}
.arrow-down::after{
font-family: FontAwesome;
content: '\f0d7';
position: absolute;
right:10%;
bottom: 15%;
font-size: 120%;
pointer-events: none;
}
.arrow-up::after{
font-family: FontAwesome;
content: '\f0d8';
position: absolute;
right:10%;
bottom: 15%;
font-size: 120%;
pointer-events: none;
}
This is my JavaScript :
<script>
$('#select').on('click', function () {
// Button clicked
$("#select").removeClass("arrow-down");
$("#select").addClass("arrow-up");
});
$('select').change(function () {
// Option selected
$("#select").addClass("arrow-down");
});
</script>
Kind regards!