时间戳

首页 > 解决方案 > CSS：-webkit-appearance：menulist Dropdown（选择标签），如何给箭头填充？

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

问题描述

我有一个用于选择标签的 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"？

提前致谢

标签： cssgoogle-chromewebkit

解决方案

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

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

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

推荐阅读