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

Question

Is it possible to set a CSS :before the element in the foreground? basically, I need to make the text get behind the grey area where the dropdown arrow is located.

I already tried to give the before element z-index: 2 and the actual element z-index: 1 but with no noticeable effect so far. The text will always flow over the select arrow of the dropdown menu, which to me looks ugly.

My Idea now was to simply set the before element on top of the select/option element of the dropdown menu to make the text flow behind the grey area. But it seems that the z-index gets ignored onto these pseudo-elements for some reason...

Can somebody give me a hint on that?

HTML:

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

Raw browser 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);
}

All other CSS-related stuff comes from bootstrap.

Answer 1

Not sure if this is what you are looking for. But the text seems to look above the arrow because the background (before) is given an opacity.

Can you please check if this helps. I have just replaced the background color for before with another color

 .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>