Display image using attr in HTML select element

Question

I want to display each country's flag in select options.
Here is my code i tried:

<select id="slcCountry">
    <option flag="https://restcountries.eu/data/afg.svg">AFG</option>
    <option flag="https://restcountries.eu/data/ala.svg">ALA</option>
    <option flag="https://restcountries.eu/data/alb.svg">ALB</option>
</select>

Here is css to show the image

select option {
    background-image: url(attr(flag));
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 10px 6px;
    width: 32px;
    height: 34px;
}

How I can display each image (flag) of the list here. Help me please.

this is nearly the same as you just asked here a couple of minutes ago. https://stackoverflow.com/questions/49665907/html-ul-list-item-pass-image-src-for-each-li-using-attribute Flag is not a valid attribute. Use images for this. — cloned, Apr 05 '18 at 08:31
@cloned i need solution, posts i created are not same, first one was ul list items, and this post about select element — Neery, Apr 05 '18 at 08:35
possible duplicate of https://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list — Temani Afif, Apr 05 '18 at 08:54
possible duplicate of https://stackoverflow.com/questions/9508029/dropdown-select-with-images?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa — Hetal Chauhan, Apr 05 '18 at 09:16

Bourbia Brahim · Accepted Answer · 2018-04-05T10:27:19.237

First thing ,for custom attribute use html5 data attribute instead of flag attr (not valid html, ),

It will not be easy or possible to implement this with simple select , so Using plugin and with some css/ js trick will be possible ,

I've used bootstrap select , with bootstrap 3 and jquery , the result is below :

See below snippet :

$(function() {

  $('.selectpicker').selectpicker({
    size: 4
  });
  // selector for generated dropdonw button
  var $button = $("button[data-id='slcCountry']");
  //generate img for each selectpicker option 
  $("#slcCountry option").each(function(i, el) {
    var flag = $(el).data("flag");
    if (flag)
      $button.next().find("li[data-original-index=" + i + "] a").css("background-image", "url(" + flag + ")");

  });


  //cahnge event to assign icon to selected elmen t
  $("#slcCountry").on("change", function(e) {
    var flag = $("#slcCountry option:selected").data("flag");
    if (flag)
      $button.find(".filter-option").css("background-image", "url(" + flag + ")");
    else
      $button.find(".filter-option").css("background-image", "url('')")
  });

  $('.selectpicker').trigger('change');

});

#img {
  width: 200px;
  height: 150px;
}

.dropdown-menu ul li a,
button[data-id='slcCountry'] .filter-option {
  background-size: 25px;
  background-position-y: center;
  background-repeat: no-repeat;
  background-position-x: 95%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<select class="selectpicker" id="slcCountry">

    <option data-flag="https://restcountries.eu/data/afg.svg">AFG</option>
    <option data-flag="https://restcountries.eu/data/dza.svg">DZA</option>
    <option data-flag="https://restcountries.eu/data/alb.svg">ALB</option>
</select>

yes, it works for me, thank you.. but bootstrap changed my page style, can i ignore it? or maybe write related css rules for this select element? — Neery, Apr 06 '18 at 10:33

Ali Sheikhpour · Answer 2 · 2018-04-05T09:11:00.653

0

This is my solution using jquery:

Please note that The code snippet may not work because :

setting background for option element is not supported on major webkit browsers. For more methods to put image in options, refer to this Q/A:
your images are hosted on https.

$(document).ready(function(){
  $("option[flag]").each(function(){
    $(this).css("background-image","url('"+ $(this).attr("flag") +"')");
  })

})

select option {
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 10px 6px;
    width: 32px;
    height: 34px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="slcCountry">
    <option flag="https://restcountries.eu/data/afg.svg">AFG</option>
    <option flag="https://restcountries.eu/data/ala.svg">ALA</option>
    <option flag="https://restcountries.eu/data/alb.svg">ALB</option>
</select>

edited Apr 05 '18 at 09:11

answered Apr 05 '18 at 08:32

Ali Sheikhpour

10,475
5
41
82

1

that won't work on most browsers. you can only set `background-color` and `color` for select options for webkit browsers – Thatkookooguy Apr 05 '18 at 08:34
Also won't work on mobile devices since they don't allow styling select options as well – Thatkookooguy Apr 05 '18 at 08:45
`the code snippet may not work because` ... it won't work, it's not because https ... – Temani Afif Apr 05 '18 at 08:50

Display image using attr in HTML select element

2 Answers2