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

Question

Edge在<select>中有一个向上/向下滑动的动画效果，我想要去除这个动画效果，但似乎除了使用自定义下拉菜单之外，找不到解决方案。想知道是否有人已经找到了禁用此动画的方法？

transition: none 似乎无效。

演示地址

- Sammy

---

If I went to an online form with a dropdown, and the site disabled the animation, I would be annoyed. I don't think this is such a good practice. Besides, the new Chromium Edge does not have this feature, and it is automatically replacing the Edge that has this feature. - Someone_who_likes_SE

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>

你可以直接复制粘贴那段代码。它已经准备好了。

- Someone_who_likes_SE