jquery - 如何修改:: after兄弟元素的CSS？

<div class="form-group form-group-lg">
    <div class="select-picker">
        <select class="form-control"></select>
    </div>
</div>

我有一个select.form-control元素，当前会更改其焦点上的边框颜色，但还有一个div.select-picker :: after元素，因此它实际上呈现为：

<div class="form-group form-group-lg">
    <div class="select-picker">
        <select class="form-control"></select>
        div.select-picker::after
    </div>
</div>

现在边框仅环绕60％，因为它不会改变:: after的边框颜色，我尝试做类似

& > select.form-control {
    position: relative;

    border-radius: $input-border-radius;
    background-color: transparent;
    box-shadow: none; // remove the bootstrap styling

    appearance: none;

    &:focus + div.select-picker::after{
        outline: none;
        border-color: green; // don't change the color on focus
    }

但这没用

最佳答案

仅当div.select-picker实际上在select元素之后时，“ +”运算符才起作用。

您可以使用span元素（或类似元素）来模拟您的：after伪元素，并使用“ +”运算符设置其样式。