Проблема выбора меню HTML в IE11

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 image 1

IE image 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

Это стандартное поведение.Каждый браузер отображает элементы немного по-своему и имеет свои собственные стили.Некоторые стили могут быть изменены, другие скрыты в теневом корне элементов и не могут быть изменены.Опция, к сожалению, имеет только несколько стилей, таких как цвет, которые могут быть установлены ...

Одним из решений этого было бы скрыть элемент 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>