html - 选择框 :before pseudo-element not working

Question

我的 CSS 没有按预期工作。在这里你可以看到我的代码:

/*Select-Box*/
select#user_select
{
    background-color: var(--white);
    float: right;
    color: var(--dark_grey);
    width: 30%;
    height: 3rem;
    padding-left: 3%;
    border: 2px solid var(--dark_grey);
    font-size: 1.2em;
    -webkit-appearance: none;
}

select#user_select::before
{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3rem;
    height: 3rem;
    background: var(--dark_grey);
}

Answer 1

是的，<Select>或任何其他形式的元素，如 <Input />除了 css :before 或 :after 之外。

所以你需要用<div>包裹它或 <span>使用 css :before 或 :after。然后一切正常。