html - 如何在选择下拉菜单上设置 Font Awesome 图标？

Question

我想在选择下拉菜单中设置超赞字体图标并更改背景颜色...我试过这段代码，但它不会工作..

这是我的 CSS 代码:

select {
  border-radius: 30px;
  padding: 0px 70px 1px 20px;
  margin-top: 50px;
  margin-left: 45px;
  font-size: 18px;
  border: 2px solid orange;
  box-shadow: 10px 3px 8px #888888;
  appearance: none;
  position: relative;
}
select i {
  position: absolute;
  float: right;
  background-color: orange;
  bottom: 0px;
  pointer-events: none;
}

这是我的 HTML 代码:

<div class="row">
      <p class="search">Search by Location</p>
      <select class="dropdown">
           <option>Canada</option>
      </select>
      <i class="fas fa-angle-down"></i>
</div>

Answer 1

编辑的答案

select.input-lg {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  /* no standardized syntax available, no ie-friendly solution available */
}

select + i.fa {
  float: right;
  margin-top: -30px;
  margin-right: 5px;
  /* this is so when you click on the chevron, your click actually goes on the dropdown menu */
  pointer-events: none;
  /* everything after this is just to cover up the original arrow */
  /* (for browsers that don't support the syntax used above) */
  background-color: #fff;
  padding-right: 5px;
}

来源:I want to change the select icon/dropdown icon to (fa-chevron-down). How can I?

您也可以关注:font awesome icon in select option