show icon first select option

Question

i have a standard select html attribute and what i want to do is add an icon to the selected option list basically it shows the user that this select has download options here's my code.

 <select>
    <option style="background-image: url('https://s17.postimg.cc/kc1y6xwlb/download.png')"></option>
    <option>PDF</option>
    <option>CSV</option>
 </select>

this is what i am trying to achieve!

source

i have tried a couple of solutions but none seems to be working for my issue, any help?

Fiddle

`https://postimg.cc/image/voejoq5a3/` does not return an image, but an HTML document - duh! And on whether this is possible to begin with, I think you should do some more/proper research ... — CBroe, May 07 '18 at 11:57
my apologies i have edited the fiddle and code please refresh — uneeb meer, May 07 '18 at 11:59
This might help. http://taylor.fausak.me/2012/03/15/dropdown-menu-in-twitter-bootstraps-collapsed-navbar/ — Sandesh Gupta, May 07 '18 at 12:15

Takit Isy · Accepted Answer · 2018-05-07T12:47:26.937

2

Unfortunately, we cannot style an option element using only CSS.

But, we can do it on the select!
Is my snippet the kind of thing you are trying to achieve?

select {
  border: 1px solid gray;
  border-radius: 8px;
  padding: 4px 0 4px 24px;
  background-image: url('https://s17.postimg.cc/kc1y6xwlb/download.png');
  background-repeat: no-repeat;
  background-position: 8px;
}

<select>
  <option hidden>…</option>
  <option>PDF</option>
  <option>CSV</option>
</select>

You might be interested in this topic: Putting images with options in a dropdown list

I hope it helps.

edited May 07 '18 at 12:47

answered May 07 '18 at 12:03

Takit Isy

9,688
3
23
47

very close please see the edited question for the image i placed! – uneeb meer May 07 '18 at 12:11
yes i have tried the above answer already the problem is firefox doesnt support it! – uneeb meer May 07 '18 at 12:11
@uneebmeer Yes, it doesn't support it anymore. :) In my snippet, I've put the download image in that position so it continues to fit when selecting an option. I don't know how to do better ! – Takit Isy May 07 '18 at 12:13
the problem in your solution is if i add a background image to the select the next option text comes along with it whereas i want it to show only the download icon – uneeb meer May 07 '18 at 12:17
@uneebmeer What if we don't put any text in the option? – Takit Isy May 07 '18 at 12:36
the it display blank option which looks bad! – uneeb meer May 07 '18 at 12:39
yes i have and idea i dsiplayed none the empty option and it worked! ty so much for your help! – uneeb meer May 07 '18 at 12:42

show icon first select option

1 Answers1