HTML Select IE11 中的菜单问题

Question

我有这个 html 用于 select 控制

<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

中呈现

chrome 图片 1

chrome 图片 2

但在 IE 中，select 选项在单击时隐藏控件，换句话说，select 选项未从 select 的底部打开控制如以下屏幕截图所示

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

您可以使用 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>

Answer 2

这是标准行为。每个浏览器呈现的元素都略有不同，并且有自己的样式。有些样式可以更改，有些样式隐藏在元素的影子根中，无法更改。可悲的是，选项只有颜色等几种样式可以设置...

一个解决方案是隐藏 select 元素并通过另一个可以设置样式的元素（例如 span）和 JavaScript 来控制它。这不是很漂亮，但许多 css 框架已经这样做了，如果你绝对必须让它看起来不错（大多数情况下都是这样），那是你唯一的选择。

Answer 3

这是自定义 select 框的快速示例。如您所见，现在甚至可以将图像放入选项中。希望对你有帮助。

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>

HTML Select IE11 中的菜单问题

HTML Select Menu issue in IE11

html

css

html-select