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

Question

是否可以在前台元素:before 基本上，我需要使文本位于下拉箭头所在的灰色区域后面。

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

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

有人可以给我一个提示吗？

HTML：

<div role="button" type="button" data-toggle="dropdown" class="btn dropdown category-dropdown">
    <span>{{ category_objects.category }}</span>
</div>

原始浏览器 output：

<div role="button" type="button" data-toggle="dropdown" class="btn dropdown category-dropdown">
    <span><select name="category" id="id_category">
        <option value="d6f13bec-f855-453b-ad2f-a426a42bde06">Hello World 1232i</option>
    </select></span>
</div>

CSS：

.category-dropdown {
    z-index: 1;
}

.category-dropdown select {
    background-color: #FFFFFF;
    height: 31.5px;
    color: #424242;
    border: 0;
    margin: 0;
    width: 10vw;
    max-width: 200px;
    min-width: 125px;
    border-radius: 3px;
    text-indent: 3px;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.category-dropdown::before,
.category-dropdown::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.category-dropdown::after { /*  Custom dropdown arrow */
    content: "\25BC";
    font-size: .625em;
    line-height: 1;
    right: 20px;
    top: 20px;
    margin-top: -.5em;
}

.category-dropdown select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-overflow: '';
}

.category-dropdown::before {
    width: 1.5em;
    right: 9px;
    top: 6px;
    bottom: 5px;
    border-radius: 0 3px 3px 0;
    margin-right: 3px;
    position: absolute;
    z-index: 2;
}

.category-dropdown select[disabled] {
    color: rgba(0, 0, 0, .3);
}

.category-dropdown select[disabled]::after {
    color: rgba(0, 0, 0, .1);
}

.category-dropdown::before {
    background-color: rgba(0, 0, 0, .15);
}

.category-dropdown::after {
    color: rgba(0, 0, 0, .4);
}

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

Answer 1

不确定这是否是您正在寻找的。 但是文本似乎在箭头上方，因为背景（之前）被赋予了不透明度。

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

 .category-dropdown { z-index: 1; }.category-dropdown select { background-color: #FFFFFF; height: 31.5px; padding-right: 1.6em; color: #424242; border: 0; margin: 0; width: 10vw; max-width: 200px; min-width: 125px; border-radius: 3px; text-indent: 3px; -moz-appearance: none; -webkit-appearance: none; }.category-dropdown::before, .category-dropdown::after { content: ""; position: absolute; pointer-events: none; }.category-dropdown::after { /* Custom dropdown arrow */ content: "\25BC"; font-size: .625em; line-height: 1; right: 20px; top: 20px; margin-top: -.5em; }.category-dropdown select { -webkit-appearance: none; -moz-appearance: none; text-overflow: ''; }.category-dropdown::before { width: 1.5em; right: 9px; top: 6px; bottom: 5px; border-radius: 0 3px 3px 0; margin-right: 3px; position: absolute; z-index: 2; }.category-dropdown select[disabled] { color: rgba(0, 0, 0, .3); }.category-dropdown select[disabled]::after { color: rgba(0, 0, 0, .1); }.category-dropdown::before { background-color: #D9D9D9; }.category-dropdown::after { color: rgba(0, 0, 0, .4); z-index: 9; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/> <div role="button" type="button" data-toggle="dropdown" class="btn dropdown category-dropdown"> <span><select name="category" id="id_category"> <option value="d6f13bec-f855-453b-ad2f-a426a42bde06">Hello World 1232i</option> </select></span> </div>