隐藏/显示选择箭头

Question

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

目标是为所有最新的主要浏览器、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;
}

<select>
    <option>Marc Roussel</option>
    <option>Gilles Lavoie</option>
    <option>Roger Maheu</option>
</select>

Answer 1

使用-webkit-appearance: menulist. 或appearance: none对于现代浏览器：

有关整个列表，请参阅http://trentwalton.com/2010/07/14/css-webkit-appearance/。

[IMO，从用户的角度来看，将标准和“正常”的东西变成特定的和令人惊讶的东西是一个奇怪的要求]