相关疑难解决方法(0)

我正在尝试<select>使用CSS 设置元素的下拉箭头,它在Chrome/Safari中完美运行:

select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;

  background-image: url('./select-arrow1.png') ;
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  margin: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  width: 200px;
}

这看起来很漂亮

根据这个逻辑,我必须做的唯一让它在Firefox中工作的是添加所有-webkit-*东西-moz-*:

-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;

它适用于99%,唯一的问题是默认下拉箭头不会消失,并保持在背景图像的顶部,如此处所示

看起来-moz-appearance: button;对<select>元素不起作用.也-moz-appearance: …