HTML Select - 如何在 Microsoft Edge 浏览器中禁用向上/向下滑动动画

Question

Edge 正在为 <select> 进行上/下滑动动画处理，我想删除此动画，但除了使用自定义下拉菜单外，似乎找不到其他解决方案。想知道是否有人想出了禁用此动画的方法？
transition: none似乎没有做任何事情。

fiddle

Answer 1

你是对的。您无法以多种方式格式化下拉列表。下拉菜单的外观取决于每个浏览器。
这应该禁用幻灯片动画:

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

function hide(element) {
  var x = document.getElementsByClassName("options");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "white";
  }
  document.getElementById('content').style.display = 'none';
  element.style.backgroundColor = "#00ffff"
}

.options:hover {
  background-color: #00dddd !important;
}

#buttons,
.options {
  cursor: pointer;
}

.options {
  border: 1px solid black;
  background-color:white;
}
#content {
  position:fixed;
  top:1em;
}

<button id="buttons" class="collapsible">Click Me</button>
<div id="content" style="display:none;" onblur="this.style.display='none';">
  <ul style="list-style:none;">
    <li onclick="hide(this); document.getElementById('buttons').innerHTML=this.innerHTML;" class="options">option 1</li>
    <li onclick="hide(this); document.getElementById('buttons').innerHTML=this.innerHTML;" class="options">option 2</li>
    <li onclick="hide(this); document.getElementById('buttons').innerHTML=this.innerHTML;" class="options">option 3</li>
  </ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna lorem, pulvinar ut eros efficitur, euismod viverra nunc. Sed at finibus odio, ut tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna lorem, pulvinar ut eros efficitur, euismod viverra nunc. Sed at finibus odio, ut tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna lorem, pulvinar ut eros efficitur, euismod viverra nunc. Sed at finibus odio, ut tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna lorem, pulvinar ut eros efficitur, euismod viverra nunc. Sed at finibus odio, ut tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna lorem, pulvinar ut eros efficitur, euismod viverra nunc. Sed at finibus odio, ut tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna lorem, pulvinar ut eros efficitur, euismod viverra nunc. Sed at finibus odio, ut tempor.

</p>

您只需复制粘贴该代码即可。已经准备好了。