Question

因此，对于CSS或<select>标签等各种元素，apple / safari都有自己的<button>。

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

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

对此有任何帮助或帮助将不胜感激。

Answer 1

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

使用'-webkit-appearance：none;'阻止苹果搞乱CSS

1 个答案: