I am working with an HTML structure that looks like this:
<div class="floating-labels">
<div class="form-group focused">
<span class="select2 select2-container">
<span class="selection">
<span class="select2-selection">
<ul class="select2-selection__rendered">
<li class="select2-search select2-search--inline">
<input class="select2-search__field" type="search"> // on focus here
</li>
</ul>
</span>
</span>
<span class="dropdown-wrapper" aria-hidden="true"></span>
</span>
<span class="bar"></span> // change style here
</div>
</div>
My goal is to apply the style width: 50%; to the .bar class when the input box with class .select2-search__field is in focus using CSS.
I attempted to achieve this using the following code:
.floating-labels > .focused > .select2-search__field:focus ~ .floating-labels > .focused > bar:after {
width: 50%;
}
Unfortunately, this approach did not work as expected.