css - 使用 '-webkit-appearance:none;' 阻止苹果乱用 CSS

Question

因此 Apple/Safari 对各种元素都有自己的 CSS，例如 <select>或 <button>标签。

我可以通过使用 -webkit-appearance:none; 来解决这个问题但对于我的 <select>这也删除了我想保留的小下拉箭头。

有没有办法绕过这个问题来删除其他额外的样式但保留箭头，或者以跨浏览器一致的方式替换箭头？

Answer 1

根据我的评论，使用 appearance: none实际上会在 <select> 上删除所有浏览器/操作系统特定的样式元素。这意味着下拉箭头也将被删除，因为不同的操作系统也会有不同的箭头样式。

您可以做的只是为箭头提供您自己的背景图像。这可以通过在元素的右侧提供足够的填充，然后注入(inject)背景图像来完成。

以下示例使用 SVG arrow icon from Google Material Design作为 data URI 的一部分.

select {
  -webkit-appearance: none;
  appearance: none;
  
  /* Add paddings to accommodate arrow */
  padding: 8px;
  padding-right: 30px;
  
  /* Add arrow icon */
  /* Source: https://material.io/tools/icons/?icon=keyboard_arrow_down&style=baseline */
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve"><path d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"/><path fill="none" d="M0,0h24v24H0V0z"/></svg>');
  background-position: center right;
  background-repeat: no-repeat;
}

<select>
  <option value="Lorem" selected>Lorem</option>
  <option value="Ipsum">Ipsum</option>
  <option value="Dolor">Dolor</option>
  <option value="Sit">Sit</option>
  <option value="Amet">Amet</option>
</select>

注意:如果您想支持 IE，则必须在您的数据 URI 中使用编码的 SVG 标记，即:

background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve"><path d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"/><path fill="none" d="M0,0h24v24H0V0z"/></svg>');