CSS：-webkit-appearance：menulist Dropdown（选择标签），如何给箭头填充？答案

【问题标题】：CSS: -webkit-appearance: menulist Dropdown (Select tag), how to give padding to the arrow?CSS：-webkit-appearance：menulist Dropdown（选择标签），如何给箭头填充？
【发布时间】：2020-10-16 00:06:52
【问题描述】：

我有这个用于选择标签的 html：

<div>
   <label> Country </label> 
   <span>
      <select>
         <option value=""></option>
         ...
      </select>
   </span>
</div>

相关的 CSS 是这样的：

select {
    -webkit-appearance: menulist;
}
label {
    margin-left: 1rem;
}

这是它的样子：

看看下拉箭头如何与选择元素的右边框没有空格？

这就是我想要设计的样式。

那么有没有 CSS 选择器可以帮助我做到这一点？还是我应该继续使用content: "someglyph" 自定义它？

提前致谢

【问题讨论】：

我总是隐藏箭头并添加一个 .svg 箭头作为背景。不是一个很好的解决方案，但它可以跨浏览器工作。选择是网络中真正的痛苦。
我会让这个问题更开放一点，看看是否有人知道更好的方法，但现在我所做的是从

标签： css google-chrome webkit

【解决方案1】：

解决这个问题的最好方法是应用这个小 CSS：

select {
      appearance: none;
      background-color: transparent;
      background-image: url(arrow.svg);
      background-repeat: no-repeat;
      background-position: right;
      background-size: 30px;
}

正如@mazoli 提到的，这个解决方案是跨浏览器的。

【讨论】：

无需自带 svg，这里有一个中灰色的，可能会很好用：background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cGF0aCBmaWxsPSJncmF5IiBkPSJNMTAsMjMyLjdsNDkwLDUzNC41bDQ5MC01MzQuNUgxMHoiIC8+DQo8L3N2Zz4=);