How to add images in select list

Question

I have a select list of genders   Code    lt select gt   lt option gt male lt  option gt   lt option gt female lt  option gt   lt option gt others lt  option gt   lt  select gt      I want to use an image in drop down list as drop-down-icon jpeg   I want to add a button in place of drop down icon   How to do that

User · Answer

UPDATE   As of 2018  this seems to work now   Tested in Chrome  Firefox  IE and Edge UPDATE   Yes I changed the background-color  not the image  stop voting me down  showing that you can change style here is still a useful contribution   lt  DOCTYPE html gt   lt html gt   lt body gt    lt style gt  select newlocale option value  quot volvo quot       background-color  powderblue      select newlocale option value  quot opel quot       background-color  red      select newlocale option value  quot audi quot       background-color  green       lt  style gt     lt select id  quot newlocale quot  gt     lt option value  quot volvo quot  gt  lt div  gt Volvo lt  div gt  lt  option gt     lt option value  quot saab quot  gt Saab lt  option gt     lt option value  quot opel quot  gt Opel lt  option gt     lt option value  quot audi quot  gt Audi lt  option gt   lt  select gt      lt  body gt   lt  html gt

User · Answer

You can use iconselect js  Icon image select  combobox  dropdown   Demo and download  http   bug7a github io iconselect js     HTML usage    lt div id  my-icon-select  gt  lt  div gt    Javascript usage       var iconSelect       window onload   function             iconSelect   new IconSelect  my-icon-select             var icons               icons push   iconFilePath   images icons 1 png    iconValue   1             icons push   iconFilePath   images icons 2 png    iconValue   2             icons push   iconFilePath   images icons 3 png    iconValue   3              iconSelect refresh icons

User · Answer

Alvaros JS free answer was a great start for me  and I really tried to get a truly JS-free answer that still delivered all the functionality expected of a Select with images  but sadly nesting forms was the down-fall  I m posting two solutions here  my main solution that uses 1 line of JavaScript  and a totally JavaScript-free solution that won t work inside another form  but might be useful for nav menus   Unfortunately there is a bit of repetition in the code  but when you think about what a Select does it makes sense  When you click on an option it copies that text to the selected area  i e   clicking 1 of 4 options will not change the 4 options  but the top will now repeat the one you clicked  To do this with images would require JavaScript  orrrr    you duplicate the entries   In my example we have a list of games  Products   which have versions  Each product may also have Expansions  which can also have versions  For each Product we give the user a list of each version if there s more than one  along with an image and version specific text     lt h4 gt  Model Name lt  h4 gt   if  Model Versions Count    1         lt div class  rich-select-option-body pl-2  gt           lt img src   Model Versions 0  ImageUrl  alt    gt  Model Versions 0  VersionName   Model Versions 0  Year       lt  div gt    else        lt h5 gt Select the version lt  h5 gt       lt div class  rich-select custom-select  gt           lt div class  rich-select-dropdown  gt               foreach  var version in Model Versions                                 lt div class  rich-select-option  gt                       lt input type  radio  name  game  id  game- version ProductId- version VersionId   if  version    Model Versions First       Html Raw   checked         gt                       lt div class  rich-select-option-body  gt                           lt label tabindex  -1  gt                               lt img src   version ImageUrl  alt    gt  version VersionName   version Year                           lt  label gt                       lt  div gt                   lt  div gt                         lt  div gt           lt input type  checkbox  id  rich-select-dropdown-button  class  rich-select-dropdown-button    gt           lt label for  rich-select-dropdown-button  gt  lt  label gt           lt div class  rich-select-options  gt               foreach  var version in Model Versions                                 lt div class  rich-select-option  gt                       lt div class  rich-select-option-body  gt                           lt label for  game- version ProductId- version VersionId  tabindex  -1  onclick  document getElementById  rich-select-dropdown-button   click     gt                               lt img src   version ImageUrl  alt    gt   version VersionName   version Year                           lt  label gt                       lt  div gt                   lt  div gt                         lt  div gt       lt  div gt      Using JS for the checkbox deselection we can have multiple instances on a form  Here I ve extended to show a list of Expansions  which also have the same logic around versions    lt h5 class  mt-3  gt Include Expansions  lt  h5 gt   foreach  var expansion in Model Expansions         lt div class  form-row  gt           lt div class  custom-control custom-checkbox w-100  gt               lt input type  checkbox  class  expansion-checkbox custom-control-input  id  exp- expansion ProductId  gt               lt label class  custom-control-label w-100  for  exp- expansion ProductId  gt                    if  expansion Versions Count    1                                         lt div class  rich-select-option-body pl-2  gt                           lt img src   expansion ImageUrl    gt  expansion Name   expansion Versions 0  VersionName   expansion Versions 0  Year                       lt  div gt                                    else                                        lt div class  rich-select custom-select  gt                           lt div class  rich-select-dropdown  gt                               foreach  var version in expansion Versions                                                                 lt div class  rich-select-option  gt                                       lt input type  radio  name  exp- version ProductId  id  exp- version ProductId- version VersionId   if  version    expansion Versions First       Html Raw   checked         gt                                       lt div class  rich-select-option-body  gt                                           lt label tabindex  -1  gt                                               lt img src   version ImageUrl  alt    gt  expansion Name   version VersionName   version Year                                           lt  label gt                                       lt  div gt                                   lt  div gt                                                         lt  div gt                            lt input type  checkbox  id  rich-select-dropdown-button- expansion ProductId  class  rich-select-dropdown-button    gt                           lt label for  rich-select-dropdown-button- expansion ProductId  gt  lt  label gt                           lt div class  rich-select-options  gt                               foreach  var version in expansion Versions                                                                 lt div class  rich-select-option  gt                                       lt div class  rich-select-option-body  gt                                           lt label for  exp- version ProductId- version VersionId  tabindex  -1  onclick  document getElementById  rich-select-dropdown-button- expansion ProductId   click     gt                                               lt img src   version ImageUrl  alt    gt  expansion Name   version VersionName   version Year                                           lt  label gt                                       lt  div gt                                   lt  div gt                                                         lt  div gt                       lt  div gt                                 lt  label gt           lt  div gt       lt  div gt    Of course this requires a fair bit of CSS  which I ve only included in this JSFiddle to reduce the size of this already massive answer  I ve used Bootstrap 4 to reduce the amount needed  and also to allow it to fit in with other Bootstrap controls and any site customisations that have been made   The images are set to 75px  but this can easily be changed in 5 lines in  rich-select and  rich-select-option-body img

User · Answer

Another jQuery cross-browser solution for this problem is http   designwithpc com Plugins ddSlick which is made for exactly this use

User · Answer

In Firefox you can just add background image to option    lt select gt     lt option style  background-image url male png    gt male lt  option gt     lt option style  background-image url female png    gt female lt  option gt     lt option style  background-image url others png    gt others lt  option gt   lt  select gt     Better yet  you can separate HTML and CSS like that  HTML   lt select id  gender  gt     lt option gt male lt  option gt     lt option gt female lt  option gt     lt option gt others lt  option gt   lt  select gt      CSS  select gender option value  male       background-image url male png       select gender option value  female     background-image url female png     select gender option value  others     background-image url others png       In other browsers the only way of doing that would be using some JS widget library  like for example jQuery UI  e g  using Selectable   From jQuery UI 1 11  Selectmenu widget is available  which is very close to what you want

User · Answer

You already have several answers that suggest using JavaScript jQuery  I am going to add an alternative that only uses HTML and CSS without any JS   The basic idea is to use a set of radio buttons and labels  that will activate deactivate the radio buttons   and with CSS control that only the label associated to the selected radio button will be displayed  If you want to allow selecting multiple values  you could achieve it by using checkboxes instead of radio buttons   Here is an example  The code may be a bit messier  specially compared to the other solutions     x000D   x000D   select-sim   x000D    width 200px  x000D    height 22px  x000D    line-height 22px  x000D    vertical-align middle  x000D    position relative  x000D    background white  x000D    border 1px solid  ccc  x000D    overflow hidden  x000D    x000D   x000D   select-sim  after   x000D    content      x000D    font-size 0 5em  x000D    font-family arial  x000D    position absolute  x000D    top 50   x000D    right 5px  x000D    transform translate 0  -50    x000D    x000D   x000D   select-sim hover  after   x000D    content     x000D    x000D   x000D   select-sim hover   x000D    overflow visible  x000D    x000D   x000D   select-sim hover  options  option label   x000D    display inline-block  x000D    x000D   x000D   select-sim hover  options   x000D    background white  x000D    border 1px solid  ccc  x000D    position absolute  x000D    top -1px  x000D    left -1px  x000D    width 100   x000D    height 88px  x000D    overflow-y scroll  x000D    x000D   x000D   select-sim  options  option   x000D    overflow hidden  x000D    x000D   x000D   select-sim hover  options  option   x000D    height 22px  x000D    overflow hidden  x000D    x000D   x000D   select-sim  options  option img   x000D    vertical-align middle  x000D    x000D   x000D   select-sim  options  option label   x000D    display none  x000D    x000D   x000D   select-sim  options  option input   x000D    width 0  x000D    height 0  x000D    overflow hidden  x000D    margin 0  x000D    padding 0  x000D    float left  x000D    display inline-block  x000D       fix specific for Firefox    x000D    position  absolute  x000D    left  -10000px  x000D    x000D   x000D   select-sim  options  option input checked   label   x000D    display block  x000D    width 100   x000D    x000D   x000D   select-sim hover  options  option input   label   x000D    display block  x000D    x000D   x000D   select-sim hover  options  option input checked   label   x000D    background  fffff0  x000D    x000D   lt div class  select-sim  id  select-color  gt  x000D     lt div class  options  gt  x000D       lt div class  option  gt  x000D         lt input type  radio  name  color  value    id  color-  checked   gt  x000D         lt label for  color-  gt  x000D           lt img src  http   placehold it 22 ffffff ffffff  alt      gt  Select an option x000D         lt  label gt  x000D       lt  div gt  x000D       lt div class  option  gt  x000D         lt input type  radio  name  color  value  red  id  color-red    gt  x000D         lt label for  color-red  gt  x000D           lt img src  http   placehold it 22 ff0000 ffffff  alt      gt  Red x000D         lt  label gt  x000D       lt  div gt  x000D       lt div class  option  gt  x000D         lt input type  radio  name  color  value  green  id  color-green    gt  x000D         lt label for  color-green  gt  x000D           lt img src  http   placehold it 22 00ff00 ffffff  alt      gt  Green x000D         lt  label gt  x000D       lt  div gt  x000D       lt div class  option  gt  x000D         lt input type  radio  name  color  value  blue  id  color-blue    gt  x000D         lt label for  color-blue  gt  x000D           lt img src  http   placehold it 22 0000ff ffffff  alt      gt  Blue x000D         lt  label gt  x000D       lt  div gt  x000D       lt div class  option  gt  x000D         lt input type  radio  name  color  value  yellow  id  color-yellow    gt  x000D         lt label for  color-yellow  gt  x000D           lt img src  http   placehold it 22 ffff00 ffffff  alt      gt  Yellow x000D         lt  label gt  x000D       lt  div gt  x000D       lt div class  option  gt  x000D         lt input type  radio  name  color  value  pink  id  color-pink    gt  x000D         lt label for  color-pink  gt  x000D           lt img src  http   placehold it 22 ff00ff ffffff  alt      gt  Pink x000D         lt  label gt  x000D       lt  div gt  x000D       lt div class  option  gt  x000D         lt input type  radio  name  color  value  turquoise  id  color-turquoise    gt  x000D         lt label for  color-turquoise  gt  x000D           lt img src  http   placehold it 22 00ffff ffffff  alt      gt  Turquoise x000D         lt  label gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For those wanting to display an icon  and accepting a  black and white  solution  one possibility is using character entities       lt select gt         lt option gt 100  amp euro  lt  option gt         lt option gt 89  amp pound  lt  option gt       lt  select gt    By extension  your icons can be stored in a custom font  Here s an example using the font FontAwesome  https   jsfiddle net 14606fv9 2  https   jsfiddle net 14606fv9 2   One benefit is that it doesn t require any Javascript  However  pay attention that loading the full font doesn t slow down the loading of your page   Nota bene  The solution of using a background image doesn t seem working anymore in Firefox  at least in version 57  Quantum       lt select gt     lt option style  background-image url euro png    gt 100 lt  option gt     lt option style  background-image url pound png    gt 89 lt  option gt   lt  select gt

User · Answer

I tried several jquery based custom select with images  but none worked in responsive layouts  Finally i came accross Bootstrap-Select  After some modifications i was able to produce this code   Code and github repo here

User · Answer

not exactly an image  but i found the easiest solution was to just add some unicode code in    works great for me

User · Answer

For a two color image  you can use Fontello  and import any custom glyph you want to use  Just make your image in Illustrator  save to SVG  and drop it onto the Fontello site  then download your custom font ready to import  No JavaScript

User · Answer

This is using ms-Dropdown   https   github com marghoobsuleman ms-Dropdown  Data resource is json  But you dont need to use json  If you want you can use with css   Css example   https   github com marghoobsuleman ms-Dropdown tree master examples  Json Example   http   jsfiddle net tcibikci w3rdhj4s 6  HTML   lt div id  byjson  gt  lt  div gt    Script   lt script gt          var jsonData                  description  Choos your payment gateway   value     text  Payment Gateway                 image  https   via placeholder com 50   description  My life  My card      value  amex   text  Amex                 image  https   via placeholder com 50   description  It pays to Discover      value  Discover   text  Discover                 image  https   via placeholder com 50   title  For everything else      description  For everything else      value  Mastercard   text  Mastercard                 image  https   via placeholder com 50   description  Sorry not available      value  cash   text  Cash on devlivery   disabled true                image  https   via placeholder com 50   description  All you need      value  Visa   text  Visa                 image  https   via placeholder com 50   description  Pay and get paid      value  Paypal   text  Paypal                          byjson   msDropDown  byJson  data jsonData  name  payments2     data  dd           lt  script gt

User · Answer

I got the same issue  My solution was a foreach of radio buttons  with the image at the right of it  Since you can only choose a single option at radio  it works  like  a select   Worket well for me  Hope it can help someone else

User · Answer

With countries  languages or currency you may use emojis   Works with pretty much every browser OS that supports the use of emojis    x000D   x000D  select   x000D   height  50px  x000D   line-height  50px  x000D   font-size  12pt  x000D    x000D   lt select name  countries  gt  x000D       lt option value  NL  gt  amp emsp Netherlands lt  option gt  x000D       lt option value  DE  gt  amp emsp Germany lt  option gt  x000D       lt option value  FR  gt  amp emsp France lt  option gt  x000D       lt option value  ES  gt  amp emsp Spain lt  option gt  x000D   lt  select gt  x000D   x000D   lt br   gt  lt br   gt  x000D   x000D   lt select name  currency  gt  x000D       lt option value  EUR  gt  amp emsp     amp emsp EUR amp emsp  lt  option gt  x000D       lt option value  GBP  gt  amp emsp    amp emsp GBP amp emsp  lt  option gt  x000D       lt option value  USD  gt  amp emsp   amp emsp USD amp emsp  lt  option gt  x000D       lt option value  YEN  gt  amp emsp    amp emsp YEN amp emsp  lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

My solution is to use FontAwesome and then add library images as text  You just need the Unicodes and they are found here  FontAwesome Reference File forUnicodes  Here is an example state filter    lt select name  state  style  height  45px  font-family Arial  FontAwesome   gt   lt option value    gt  amp  xf039   amp nbsp  All States lt  option gt   lt option value  enabled  style  color green   gt  amp  xf00c   amp nbsp  Enabled lt  option gt   lt option value  paused  style  color orange   gt  amp  xf04c   amp nbsp  Paused lt  option gt   lt option value  archived  style  color red   gt  amp  xf023   amp nbsp  Archived lt  option gt   lt  select gt       Note the font-family Arial  FontAwesome  is required to be assigned in style for select like given in the example

[html] How to add images in select list?

Examples related to html

Examples related to css