我正在尝试从FontAwesome图标集添加向下指向的V形符号（基本上是向下箭头）到表单选择框。我从选择框中删除了默认样式，并在表单后面添加了图标作为伪元素。它在jsFiddle中按预期工作，但在我正在处理的网站上没有。
似乎问题可能是，选择中的background: transparent;样式在网站上的效果与小提琴中的效果不同，但我不确定为什么会出现这种情况。我知道我可以通过增加z-index使图标可见，但是当点击图标时，选择下拉列表将不会显示（就像在小提琴中一样）。
编辑：我需要在点击图标时显示下拉列表;这是小提琴中的情况，但不适用于伪元素
上更高的z-index编辑2：已接受解决方案的示例在此fiddle;还删除了生产网站的链接。
对这里发生的事情有什么看法？
答案 0 :(得分：0)
您的css中z-index: -1上有.woocommerce-ordering:after。使它为0或大于0并且它可以工作。
答案 1 :(得分：0)
似乎你有两个不同的问题 - 定位和功能。目前，您的网站根本不显示箭头。即使它确实如此，单击箭头也不会打开下拉列表。简单地说，它可以在某些浏览器中使用，但AFAIK不是跨浏览器的解决方案。
根据功能，将'pointer-events:none'添加到箭头中。这将确保它不会处理任何点击，并且它们将被传播到选择元素。
关于你的定位：
只需将最小宽度设置为N像素，然后从箭头中移除绝对定位，而不是更改z-index。
在CSS选择器ordering:after
Remove `position:absoulte;`.
在CSS选择器select.orderby
将width:100%;更改为min-width: 200px;（或您需要的任何宽度）
希望这有帮助！