IE11中的HTML選擇菜單問題

Question

我有這個html作為選擇控件

 <select class="form-control"> <option value="0"></option> <option value="1: 1" >Jr.</option> <option value="2: 2">Sr.</option> <option value="3: 3">I</option> <option value="4: 4">II</option> <option value="5: 5">III</option> </select> 

它正在按預期方式在chrome中呈現

鍍鉻圖像1

鉻圖像2

但在IE瀏覽器，選擇選項隱藏，當它被點擊或者換句話說，選擇選項是沒有得到從選擇控制的底部開在這個下面的屏幕截圖看到的控制

IE圖片1

IE瀏覽器圖片2

這是默認行為還是可以更改？ 我嘗試使用此CSS進行操作，但沒有成功

   select.form-control {
    width: 100%;
    max-width: 325px;
    border-width: 0 0 1px 0;
    box-shadow: none;
    border-radius: 0;
    -moz-appearance: none;
    text-indent: .01px;
    text-overflow: '';
    position: relative;
}
   option, select.form-control option {
    color: blue !important;
    top: 0px !important;
    position: absolute !important;
}

有什么建議嗎？

Answer 1

這是標准行為。 每個瀏覽器呈現的元素都略有不同，並且具有自己的樣式。 某些樣式可以更改，另一些樣式則隱藏在元素的陰影根中，無法更改。 可悲的是，option只有幾種樣式可以設置顏色...

一種解決方案是隱藏select元素，並通過另一個可以設置樣式（例如span）和JavaScript的元素來控制它。 那不是真的很漂亮，但是許多CSS框架已經這樣做了，如果您絕對必須使它看起來不錯（大多數情況下是這樣），那是您唯一的選擇。

Answer 2

這是一個自定義選擇框的快速示例。 如您所見，現在甚至可以將圖像放入選項中。 希望這對您有所幫助。

Fontawesome用於插入符號。 JS源代碼中的文檔。

 // Create a reference to the select box const selectBox = document.getElementById("selected"); // Add an event listener to detect the click and make the options (in)visible selectBox.addEventListener("click", function() { // Add or remove class 'open' document.getElementById("options").classList.toggle("open"); }); // Put all options in an array const options = [...document.getElementsByClassName("option")]; // Add event listener for each option options.map( option => option.addEventListener("click", function() { // Create a reference to the input field const myInput = document.getElementById("sel"); // Retrieve the text from the clicked option const optionText = this.getElementsByTagName("span")[0].innerHTML; // Put the text in the input field value myInput.value = optionText; // Put the text in the select box selectBox.innerHTML = optionText; // Close the select box document.getElementById("options").classList.toggle("open") })); 

 .container { display: flex; flex-wrap: wrap; width: 25%; } #selected { border: thin solid darkgray; border-radius: 5px; background: lightgray; display: flex; align-items: center; cursor: pointer; height: 1.5em; margin-bottom: .2em; padding-left: .5em; min-width: 150px; position: relative; } #selected:after { font-family: FontAwesome; content: "\\f0d7"; margin-left: 1em; position: absolute; right: .5em; } #options { display: none; margin: 0; padding: 0; } #options.open { display: inline-block; } li { display: flex; justify-content: flex-start; align-items: center; cursor: pointer; } li>img { margin-right: 1em; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <form> <input type="hidden" id="sel"> <div class="container"> <div id="selected">Select an option</div> <ul id="options"> <li class="option"><img src="http://placehold.it/50/00ff00"><span>Option 1</span></li> <li class="option"><img src="http://placehold.it/50/ff0000"><span>Option 2</span></li> <li class="option"><img src="http://placehold.it/50/0000ff"><span>Option 3</span></li> </ul> </div> </form> 

Answer 3

您可以使用CSS糾正行為

 select { float: left; display: inline-block; } 

 <select class="form-control"> <option value="0"></option> <option value="1: 1" >Jr.</option> <option value="2: 2">Sr.</option> <option value="3: 3">I</option> <option value="4: 4">II</option> <option value="5: 5">III</option> </select>