How do i set font awesome icon on select dropdown?

Question

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>

put it before select, otherwise it will load select first and then css, so it won't work. — Felipe Moreira, Jun 26 '20 at 19:49
What kind of Font Awesome are you using. If you're using the CSS CDN, it should go in your ``; if you're using a JavaScript kit, it should go at the end of the ``. — Daemon Beast, Jun 26 '20 at 19:53
I recommend that you avoid styling input elements too much, because iOS will **completely ignore** certain styles, which will lead to inconsistent styling across browsers. — Daemon Beast, Jun 26 '20 at 19:57
check this Answer hope this will work for you https://stackoverflow.com/a/53664264/10079978 — Muhammad Fazeel, Jun 26 '20 at 19:58
@FelipeMoreira I tried to put before select tag... just arrow goes to left side...it won't be work — devanshi, Jun 26 '20 at 20:02
@FelipeMoreira I want styling that arrow like background color and arrow will go to in radius — devanshi, Jun 26 '20 at 20:04
Your CSS doesn't make sense. You're styling any `` elements inside of ` — Daemon Beast, Jun 26 '20 at 20:08
The `i` won't get styled though, because your CSS is styling `i` elements INSIDE `select` elements, but in your HTML, the `i` element is after the `select` element. `select + i` should be used if you want to style `i` elements directly after `select` elements. — Daemon Beast, Jun 26 '20 at 20:19
hi @vasudevu you can simply try to add color: orange; to your select style it will give you orange color for both Canada and the select arrow — abdelhak51, Jun 26 '20 at 20:51
@devanshi the code is working fine for me the arrow is inside the select — abdelhak51, Jul 02 '20 at 13:01

Krishan Kumar · Answer 1 · 2020-06-30T05:31:08.303

0

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

edited Jun 30 '20 at 05:31

answered Jun 27 '20 at 08:24

Krishan Kumar

394
4
13

If i remove below line then how arrow will come on dropdown? – devanshi Jun 29 '20 at 16:26
https://codepen.io/Vasudevu/pen/wvMrmgP In codepen showing original dropdown and i don't able to change css of – devanshi Jun 29 '20 at 16:36
just remove and test it. Its already showing dropdown arrow. – Krishan Kumar Jun 29 '20 at 20:04
I checked there in codepen appearance:none; css property not working... that's why it shows correct... I want to remove that arrow and put icon and set background color and radius in that... – devanshi Jun 29 '20 at 22:31
Please go through the source link I have given, it will definetly will resolve your all issues regarding "select icon change" – Krishan Kumar Jun 30 '20 at 05:31
I tried your source link but not getting actual output – devanshi Jun 30 '20 at 18:36
It may be issue with your font awsome lib because its not visible in output. please try to provide the actual location where you are running this. – Krishan Kumar Jun 30 '20 at 18:44

score 0 · Answer 2 · answered Apr 04 '22 at 15:10

0

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.

answered Apr 04 '22 at 15:10

Willy Richardson

116
4

How do i set font awesome icon on select dropdown?

2 Answers2