Trying my hand at creating a customized select box to match my style. Everything seems to be going well, except for one issue - when I make a selection from the dropdown, the text displays but the icon remains hidden. As someone who is new to jQuery, I'm seeking guidance on how to ensure that the icon also appears when an item is selected.
Any assistance on this matter would be greatly appreciated.
$('.select').click(function() {
$(this).attr('tabindex', 1).focus();
$(this).toggleClass('active');
$(this).find('.select-menu').slideToggle(300);
});
$('.select').focusout(function() {
$(this).removeClass('active');
$(this).find('.select-menu').slideUp(300);
});
$('.select .select-menu li').click(function() {
$(this).parents('.select').find('span').text($(this).text());
});.select {
background-color: rgb(255, 255, 255);
width: 300px;
height: 70px;
position: relative;
display: inline-block;
border-radius: 50px;
margin-top: 25px;
}
.select .select-inner {
width: 100%;
line-height: 70px;
border: 0;
padding: 0 20px;
list-style: none;
border-radius: 50px;
cursor: pointer;
padding: 0;
}
.select .select-inner:focus {
outline: none;
}
.select ul {
overflow: hidden;
position: absolute;
left: 0;
list-style: none;
cursor: pointer;
display: none;
overflow-y: auto;
width: 100%;
margin-top: 10px;
line-height: 50px;
min-height: 50px;
background-color: inherit;
border: 0;
}
.select:focus-visible {
outline: none;
}
.select .select-inner .select-icon {
position: absolute;
left: calc(100% - 32px);
line-height: 70px;
}
.select .select-inner i,
.select .select-menu i {
background-image: -moz-linear-gradient(14deg, rgb(103, 23, 205) 0%, rgb(40, 113, 250) 60%);
background-image: -webkit-linear-gradient(14deg, rgb(103, 23, 205) 0%, rgb(40, 113, 250) 60%);
background-image: -ms-linear-gradient(14deg, rgb(103, 23, 205) 0%, rgb(40, 113, 250) 60%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 15px;
margin-right: 15px;
}
.select .select-inner span,
.select .select-menu {
font-size: 18px;
color: rgb(27, 27, 27);
padding: 0 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="select">
<div class="select-inner">
<span><i class="fa-solid fa-hashtag"></i>Select Platform</span>
<i class="select-icon fa-solid fa-sort-down"></i>
</div>
<ul class="select-menu">
<li id="facebook"><i class="fa-brands fa-facebook-f"></i>Facebook</li>
<li id="Instagram"><i class="fa-brands fa-instagram"></i>Instagram</li>
</ul>
</div>