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

Posted 2023-03-06

【中文标题】CSS：-webkit-appearance：menulist Dropdown（选择标签），如何给箭头填充？

【英文标题】：CSS: -webkit-appearance: menulist Dropdown (Select tag), how to give padding to the arrow?

【发布时间】：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 箭头作为背景。不是一个很好的解决方案，但它可以跨浏览器工作。选择是网络中真正的痛苦。

我会让这个问题更开放一点，看看是否有人知道更好的方法，但现在我所做的是从 中删除边框和 bg 颜色并应用那些到包装器 ，并通过添加 padding-right: 1rem; 我可以实现我想要的。不过，我同意@MaZoli，最好的跨浏览器选项是隐藏箭头并使用图标或背景

【参考方案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=);