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>