表单选择上的背景文本

Question

我正在尝试将FontAwesome 图标集中的向下 V 形（基本上是向下箭头）添加到表单选择框。我从选择框中删除了默认样式，并将图标添加为表单后的伪元素。它在 jsFiddle 中按预期工作，但在我正在处理的网站上却没有。

似乎问题可能是选择上的background: transparent; 样式在网站上的工作方式与小提琴中的不同，但我不确定为什么会这样。我知道我可以通过增加 z-index 使图标可见，但是当点击图标时选择下拉菜单不会显示（就像在小提琴中一样）。

编辑：我需要在点击图标时显示下拉菜单；小提琴就是这种情况，但不适用于伪元素上更高的 z-index

编辑 2：接受的解决方案示例在此fiddle；还删除了到生产网站的链接。

对这里发生的事情有什么想法吗？

Answer 1

您似乎有两个不同的问题 - 定位和功能。目前您的网站根本不显示箭头。即使这样做了，单击箭头也不会打开下拉列表。简单地把它放在上面，可能在某些浏览器中工作，但 AFAIK 不会是一个跨浏览器的解决方案。

根据功能，将'pointer-events:none' 添加到箭头元素。这将确保它不处理任何点击，并将它们传播到选择元素。

关于你的定位：

无需更改 z-index，只需将 min-width 设置为 N 像素并从箭头中删除绝对定位。

在 CSS 选择器ordering:after

Remove `position:absoulte;`.

在 CSS 选择器select.orderby

将width:100%; 更改为min-width: 200px;（或您需要的任何宽度）

希望这会有所帮助！

Answer 2

您的 css 中的 .woocommerce-ordering:after 上有 z-index: -1。将其设为 0 或大于 0 即可。