我正在尝试设计下拉箭头的样式<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: none;
对于删除默认下拉箭头没有效果。
那么正确的值是多少-moz-appearance
删除默认的下拉箭头?
Updates:
2014 年 12 月 11 日: 停止发明新的黑客。 4年半后,-moz-appearance:none
从 Firefox 35 开始工作。moz-appearance:button
仍然是坏的,无论如何你都不需要使用它。这是一个非常基本的工作示例。
2014 年 4 月 28 日: 提到的css hack工作了几个月,但自 2014 年 4 月开始,这个错误又重新出现在所有平台上的 Firefox 31.0.a1 Nightly 中。