How to insert an icon inside of a select list

HTML & CSS
1

Hello Everyone I want to insert an Icon inside of a select list just like it’s shown in the provided picture.

I’ve been searching for two days but I didn’t find a proper solution for it.

Thank You in advance.Capture

2

Hi Algrinder, welcome to the forums!

I’m curious about the icon.

Is there a different langauge icon at each option, or is it a descriptive icon of the list itself?

1 Like
3

You can’t place icons or images in a standard html select element

Usually you would use a select replacement plugin where a standard select is converted into an html list and icons can be added to a normal list. The js then takes care of displaying selected list items and at the same time updating the original select

Alternatively you could use a standard html list but then use js to allow selection and pasting values into a hidden input.

There are plenty of select replacement scripts around so just search on google and choose one that allows icons. :slight_smile:

2 Likes
4

Thank You, In fact, it’s a descriptive icon of the list itself.

5

If you want specific suggestions, please post the code including CSS for the form with the select you have.

(If not, you’ll only get a general advice how to add an icon like in your picture.)

2 Likes
6

Hi there Algrinder,

Here is an example…

https://codepen.io/coothead/full/xxVRJWw

…and the code…

https://codepen.io/coothead/pen/xxVRJWw

Of course, you would need to experiment with
the values to suit your image and text. :winky:

coothead

4 Likes
7

Lacking your code, the simplest solution I can think of is using a symbol as the icon in a label wrapped around the select:

Tthe Unicode symbol “Globe with meridians” as icon:

<label>&#127760;
  <select>
    <option>English</option>
    <option>German</option>
    <option>French</option>
  </select>
</label>

CSS example:

label {
  border:1px solid red;
  padding: .1em .2em .2em .4em;
  background-color: #333;
  color: #eee;
  font: bold 1.5em sans-serif;
}
select {
  margin-left:.2em;
  border:0 none;
  background-color: inherit;
  color: inherit;
  font-size: inherit;
  vertical-align: middle;
}
3 Likes
8

Ah ok :). I assumed you’d have a different icon for each option in the select.

The versions by @Erik_J and @coothead should have you sorted :slight_smile:

2 Likes
9

Thank You So much, You saved My day. It finally worked. I really appreciate Your help.
Thank You Again. :heart:

10

Thank You Erik_J, I just tried it and it worked as I wanted it to. I really Appreciate Your time guys. :heart:
Your help meant a lot, It saved me hours.
Thank You again.

11

Thank You PaulOB For your interest. Erik_J and coothead solutions worked Wonderfully.

2 Likes
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.