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

Question

Edge 有一个向上/向下滑动的动画处理正在进行<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>

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