WinchenzoMagnifico
WinchenzoMagnifico

Reputation: 3425

how to modify the css of a ::after sibling element?

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

I have a select.form-control element that currently changes its border color on focus, but there is also a div.select-picker::after element so it actually renders like:

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

Right now the border only wraps around 60% because its not changing the border color of the ::after, i tried doing something like

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

but it didn't work

Upvotes: 0

Views: 165

Answers (1)

Mumpo
Mumpo

Reputation: 546

The "+" operator will only work if the div.select-picker is actually after the select element.

You could use a span element (or similar) to emulate your :after pseudoelement, and style it with the "+" operator.

Upvotes: 4

Related Questions