自定义 Select 框与 ul li 与字体真棒图标

Question

I am trying to make a custom select box to style it my way. everything is going right but when I select anything from the dropdown the text shows up but the icon within doesn't. I am also new to jQuery. the thing I want is the icon to show up as well when I select something from the dropdown.

Any help will be 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>

Answer 1

please add a link as below, on the HEAD. I hope this helps

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
/>