带有ul li的自定义“选择框”，其中有字体超赞的图标

Question

我正在尝试做一个自定义的选择框，以我的方式来设计它。一切都进展顺利，但当我从下拉列表中选择任何内容时，就会显示文本，但内部的图标却不会出现。我也是jQuery的新手。当我从下拉菜单中选择一些东西时，我想要的是图标也会显示出来。

任何帮助都将不胜感激。

​

$('.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

请在头上添加如下链接。我希望这能帮到你

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