CSS：-webkit-appearance：菜单列表下拉菜单（选择标签），如何给箭头填充？

Question

我有一个用于选择标记的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"对其进行自定义？

预先感谢

Answer 1

解决此问题的最佳方法是应用以下CSS：

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

正如@mazoli所说，此解决方案是跨浏览器。