Reputation: 3425
<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
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