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

Question

Edge 有一个用于<select> 的上/下滑动动画dealio，我想删除此动画，但似乎找不到除了使用自定义下拉菜单之外的解决方案。想知道是否有人想出了禁用此动画的方法？

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>

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