Html CSS下拉菜单-如何将元素放在选择/选项元素前景的元素之前

是否可以在前景中的元素之前设置CSS:？ 基本上，我需要使文本位于下拉箭头所在的灰色区域后面

我已经尝试给出before元素z-index:2和实际元素z-index:1 但到目前为止没有明显的效果。 文本将始终在下拉菜单的选择箭头上流动，这在我看来很难看

我现在的想法是简单地将before元素设置在下拉菜单的select/option元素的顶部，使文本在灰色区域后面流动。 但由于某种原因，z索引似乎被忽略在这些伪元素上

有人能给我一个提示吗

HTML:

{{category_objects.category}} 原始浏览器输出：

你好，世界1232i CSS:

.类别下拉列表{ z指数：1； } .类别下拉列表选择{ 背景色：FFFFFF； 身高：31.5px； 颜色：424242； 边界：0； 保证金：0； 宽度：10vw； 最大宽度：200px； 最小宽度：125px； 边界半径：3px； 文本缩进：3px； -moz外观：无； -webkit外观：无； } .类别下拉列表：：之前， .类别下拉列表：：之后{ 内容：； 位置：绝对位置； 指针事件：无； } .category下拉列表：：在{/*自定义下拉箭头之后*/ 内容：\25BC； 字体大小：.625em； 线高：1； 右：20px； 顶部：20px； 边缘顶部：-.5em； } .类别下拉列表选择{ -webkit外观：无； -moz外观：无； 文本溢出：； } .类别下拉列表：：之前{ 宽度：1.5em； 右：9px； 顶部：6px； 底部：5px； 边界半径：0 3px 3px 0； 右边距：3倍； 位置：绝对位置； z指数：2； } .类别下拉列表选择[已禁用]{ 颜色：rgba0,0,0,3； } .类别下拉列表选择[禁用]：：之后{ 颜色：rgba0,0,0,1； } .类别下拉列表：：之前{ 背景色：rgba0,0,0,15； } .类别下拉列表：：之后{ 颜色：rgba0,0,0,4； }

---

所有其他与CSS相关的东西都来自bootstrap。

不确定这是否是您想要的。 但是文本看起来高于箭头，因为前面的背景是不透明的

你能检查一下这是否有用吗。我刚刚用另一种颜色替换了以前的背景色

.类别下拉列表{ z指数：1； } .类别下拉列表选择{ 背景色：FFFFFF； 身高：31.5px； 右侧填充：1.6em； 颜色：424242； 边界：0； 保证金：0； 宽度：10vw； 最大宽度：200px； 最小宽度：125px； 边界半径：3px； 文本缩进：3px； -moz外观：无； -webkit外观：无； } .类别下拉列表：：之前， .类别下拉列表：：之后{ 内容：； 位置：绝对位置； 指针事件：无； } .category下拉列表：：在{/*自定义下拉箭头之后*/ 内容：\25BC； 字体大小：.625em； 线高：1； 右：20px； 顶部：20px； 边缘顶部：-.5em； } .类别下拉列表选择{ -webkit外观：无； -moz外观：无； 文本溢出：； } .类别下拉列表：：之前{ 宽度：1.5em； 右：9px； 顶部：6px； 底部：5px； 边界半径：0 3px 3px 0； 右边距：3倍； 位置：绝对位置； z指数：2； } .类别下拉列表选择[已禁用]{ 颜色：rgba0,0,0,3； } .类别下拉列表选择[禁用]：：之后{ 颜色：rgba0,0,0,1； } .类别下拉列表：：之前{ 背景色：D9D9D9； } .类别下拉列表：：之后{ 颜色：rgba0,0,0,4； z指数：9； } 你好，世界1232i

---

@已经添加了RachelGallen相关的html。您是否可以插入输出的源代码或至少一个示例span@RachelGallen还添加了冰块解决方案，效果很好，感谢您的时间和帮助！