Question

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

目标是为所有最新的主流浏览器，Edge，Chrome和IE 11隐藏HTML Select Arrow，但在鼠标悬停时显示它。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

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

隐藏/显示选择箭头

1 个答案: