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

Question

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

transition: none 似乎没有做任何事情。

小提琴

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>

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