html - 隐藏/显示选择箭头

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，从用户的 Angular 来看，将标准和“正常”的东西变成特定的和令人惊讶的东西是一个奇怪的要求]