background is not working inside select input field on google chrome

Question

I want to add icon inside select input tag its working in Firefox but not working in Google Chrome anybody can solve it? My code is below what is have tried.

select{ font-size:18px;}
.bride{ background:url('https://www.shareicon.net/data/32x32/2016/04/06/745724_people_512x512.png') top right no-repeat; float:right;}
.groom{ background:url('http://icons.iconarchive.com/icons/designbolts/free-male-avatars/32/Male-Avatar-Cool-Sunglasses-icon.png') top right no-repeat; float:right;}

<select>
<option value="Female" class="bride">Bride</option>
<option value="Male" class="groom">Groom</option>
</select>

Possible duplicate of [How to add a images in select list](https://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list) — Option, Jul 25 '17 at 10:46

score 0 · Answer 1 · answered Aug 05 '17 at 14:41

This might help you https://jsfiddle.net/7x1v5wyy/1/

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
myFunction = function() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 8px;
    border-radius: 4px;
    font-size: 18px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

.dropdown-content a  img {
  height: 15px;
}

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Select Gender</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">
      <img src="https://www.shareicon.net/data/32x32/2016/04/06/745724_people_512x512.png" /> Male</a>
    <a href="#">
      <img src="http://icons.iconarchive.com/icons/designbolts/free-male-avatars/32/Male-Avatar-Cool-Sunglasses-icon.png" /> Female</a>
  </div>
</div>

Hope this will help you.

background is not working inside select input field on google chrome

1 Answers1