背景不工作谷歌鉻合金選擇輸入字段

我想在select input標籤裏面添加圖標標籤其工作在Firefox但是在Google Chrome沒有工作任何人都可以解決嗎？我的代碼低於所嘗試的。背景不工作谷歌鉻合金選擇輸入字段

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>

來源

2017-07-25 Rohit Verma

可能重複[如何在選擇列表中添加圖像]（https://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list） – Option

這可能有助於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>

你希望這會幫助你。

來源

2017-08-05 14:41:03 Shiladitya

背景不工作谷歌鉻合金選擇輸入字段

回答

相關問題