Css Firefox中带有自定义样式选择的奇怪位置问题

我试图获得一个带有箭头的纯CSS选择输入。一切都很好，只是Firefox引起了一些奇怪的问题，并将箭头推过了框的宽度

您可以在此处看到：（请在FF浏览器中查看）

---

这是某种错误吗？在Firebug中查看css以尝试修复问题时，它会自行修复并显示应如何修复。真奇怪。非常感谢您的帮助。谢谢

尝试将

选择的
元素设置为相对元素，并调整
伪元素之前和之后的
右侧属性

试试这个

.wrap {
  width: 200px;
  margin: 10% auto;
  font-size: 14px;
}

select {
  width: 100%;
  padding:10px;
  margin: 0;
  border: 1px solid #bec1c3;
  border-radius:0;
  background: #fff;
  color:#888;
  line-height: 1;
  outline:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  position: relative;
}

span.select {
    position:relative;
    padding: 9px 0;
}

span.select:after {
    content:'';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 6px 4px 0 4px;
    border-color: #bec1c3 transparent transparent transparent;
    position: absolute;
    right: 16px;
    top: 14px;
    pointer-events: none;
  z-index: 100;
}

span.select:before {
    content: '';
    display: block;
    right: 6px;
    top: 0;
    width: 34px;
    height: 34px;
    background: #F7F7F7;
    position: absolute;
    pointer-events: none;
  z-index: 99;
}

Saucelabs显示了以下浏览器，也显示了您提到的bug：

   1. Firefox 25 on windows7
   2. Firefox 20 on windows7
   3. Firefox 10 on windows7
   4. Firefox 25 on Linux

这个链接有用吗？
这不起作用，因为我正在使用：before&:after元素创建箭头，而该箭头不能用于选择元素。@ftntravi很抱歉，ff的浏览器版本是什么？最新版本25.0.1