'How do i set font awesome icon on select dropdown?

I want to set font awesome icon on select drop down and change the background color as well... I tried this code but it won't be work..

Here is my CSS code:

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;
}

Here is my HTML Code:

<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>

enter image description here

htmlcssdrop-down-menufont-awesomedropdown


Solution 1:[1]

Edited Answer

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;
}

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

Also you may follow this: font awesome icon in select option

Solution 2:[2]

For his code and a fontawesome solution

.row select {    
    display: inline-block;
    appearance: none;
    margin-right: -24px;
    padding-right: 36px;
}
.row i {
    pointer-events: none;
    font-size: 1rem;
}

worked for me.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Willy Richardson

Related Questions