如何隐藏Chrome中的<select>下拉箭头

时间:2018-02-18 21:59:24

标签: php css google-chrome

如何隐藏Chrome中的下拉箭头? 在Firefox上我做到了: -moz-appearance:none; 但我不知道我怎么能在Chrome上做。 任何的想法? 比很多

2 个答案:

答案 0 :(得分:2)

使用appearance: none;及其各种前缀版本在不同的浏览器中实现此目的。

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

答案 1 :(得分:0)

很像前缀-webkit专门针对Firefox(以及其他 Gecko browsers ),你正在寻找select { padding: 5px; -webkit-appearance: none; }前缀来定位 {/ 3}} ,例如Chrome和Safari。

隐藏 WebKit browsers 下拉列表可以通过 <select> 完成:

<select>
  <option>One</option>
  <option>Two</option>
</select>
-webkit-appearance: none

请注意,这些供应商前缀唯一指向相应的浏览器,因此,如果您要应用上述{{1}},则下拉列表将隐藏在Chrome上,但仍会在Firefox上显示。