小编Mar*_*sel的帖子

隐藏/显示选择箭头

尽管我进行了搜索,但我还是发现了有关删除或隐藏箭头但未在悬停时显示的相关主题。

目标是为所有最新的主要浏览器、Edge、Chrome 和 IE 11 隐藏 HTML 选择箭头,但在鼠标悬停时显示它。

现在,我已经能够使用以下代码使其在 IE 11 中完美运行,但在 Chrome 和 Edge 中无法正常运行。关于更改或添加此代码以使其跨浏览器的任何见解?

select::-ms-expand {
  display: none;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
}

select:hover {
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}
select:hover::-ms-expand {
  display: block;
}
Run Code Online (Sandbox Code Playgroud)
<select>
    <option>Marc Roussel</option>
    <option>Gilles Lavoie</option>
    <option>Roger Maheu</option>
</select>
Run Code Online (Sandbox Code Playgroud)

html css

4
推荐指数
1
解决办法
6810
查看次数

标签 统计

css ×1

html ×1