javascript - background is not working inside select input field on google chrome -

i want add icon inside select input tag working in firefox not working in google chrome can solve it? code below 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>

this might https://jsfiddle.net/7x1v5wyy/1/

/* when user clicks on button,   toggle between hiding , showing dropdown content */  myfunction = function() {      document.getelementbyid("mydropdown").classlist.toggle("show");  }    // close dropdown menu if user clicks outside of  window.onclick = function(event) {    if (!event.target.matches('.dropbtn')) {        var dropdowns = document.getelementsbyclassname("dropdown-content");      var i;      (i = 0; < 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;  }    /* container <div> - needed position dropdown content */  .dropdown {      position: relative;      display: inline-block;  }    /* dropdown content (hidden 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 dropdown */  .dropdown-content {      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 dropdown menu (use js add class .dropdown-content container when user clicks on dropdown button) */  .show {display:block;}    .dropdown-content  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 you.