Wie ändert man die CSS eines a :: after-Geschwisterelements?

Question

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

Ich habe ein select.form-Kontrollelement, das zur Zeit seine Grenzfarbe auf Fokus ändert, aber es gibt auch einen div.select-Picker :: nach Elemente so es macht tatsächlich wie:

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

Gerade jetzt nur die Grenze wickelt rund 60%, weil es nicht die Rahmenfarbe des :: Wechsel nach, habe ich versucht, etwas zu tun, wie

& > 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 
    } 

aber es hat nicht funktioniert

Answer 1

Der Operator "+" funktioniert nur, wenn sich der div.select-picker tatsächlich hinter dem select-Element befindet.

Sie können ein span-Element (oder ein ähnliches Element) verwenden, um Ihr: nach Pseudoelement zu emulieren und es mit dem Operator "+" zu formatieren.