CSS: -webkit-appearance: menulist Dropdown (Select 标签)，如何给箭头填充？

Question

我有这个 html 用于 select 标签：

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

相关 CSS 是这样的：

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

这是它的样子：

看到下拉箭头如何没有 space 和 select 元素的右边框了吗？

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

那么有 CSS select 或者可以帮助我做到这一点吗？还是我应该继续使用 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 提到的，这个解决方案是跨浏览器的。

CSS: -webkit-appearance: menulist Dropdown (Select 标签)，如何给箭头填充？

CSS: -webkit-appearance: menulist Dropdown (Select tag), how to give padding to the arrow?

css

webkit

google-chrome