Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using chosen.js, how would I add images to the dropdown items?

Using chosen.js, how would I add images to the dropdown items?

like image 637
kinet Avatar asked Sep 04 '12 20:09

kinet


People also ask

How do I add an image to a select drop down?

The programmer can set this according to the need. Add <img> tag in dropdown content to insert image into dropdown list for each items. Note: In case the user needs the width of the content to be as wide as the dropdown button, please set the width to 100% (Set overflow: auto to get scroll on small screens).


2 Answers

To complete Joseph (I can't add comment to his answer), the class has changed since an unknown version: Here's the correct css in v1.0.0:

li.active-result {
    background: url('path/to/img.png') no-repeat 3px center;
    text-indent:2em;
}

Thx Joseph!

like image 28
Sylvain P. Avatar answered Oct 22 '22 22:10

Sylvain P.


By setting a background-image on chosen's list items:

.chzn-results li {
    background: url('path/to/img.png') no-repeat 3px center;
    padding-left: 12px;
}

Adjust the pixel count accordingly.

like image 63
Joseph Silber Avatar answered Oct 22 '22 22:10

Joseph Silber