如何在选择下拉菜单上设置字体真棒图标？

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