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

WinchenzoMagnifico
  • 3,075
  • 5
  • 20
  • 23
  • Possible duplicate of [Can I target a :before or :after pseudo-element with a sibling combinator?](http://stackoverflow.com/questions/7735267/can-i-target-a-before-or-after-pseudo-element-with-a-sibling-combinator) – Bram Vanroy Jun 30 '16 at 15:54
  • 1
    This is basically a [**parent selector**](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) problem – Paulie_D Jun 30 '16 at 16:01

1 Answers1

4

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.

Mumpo
  • 528
  • 7
  • 16