Fix select icon brightening on label hover

[dangowans]

This is an improvement, maybe a bug fix.

Given the code below, when hovering over the corresponding label, the icon next to the select does not change to a brighter color. It works for input combinations, but not select.

<div class="field">
	<label class="label" for="searchFilter">Filter</label>
	<div class="control has-icons-left">
  		<div class="select is-fullwidth">
    		<select id="searchFilter" name="searchFilter">
      			<option value="">(All)</option>
				<option value="1">Filter 1</option>
				<option value="2">Filter 2</option>
			</select>
		</div>
		<span class="icon is-small is-left">
			<i class="fa-solid fa-search"></i>
		</span>
	</div>
</div>

Proposed solution

Add &:has(select:hover) to icon color code.

&:hover,
&:has(select:hover) {
  & ~ .#{iv.$class-prefix}icon {
    color: cv.getVar("input-icon-hover-color");
  }
}

Resulting in the following fix:

.control.has-icons-left .select:has(select:hover) ~ .icon,
.control.has-icons-right .select:has(select:hover) ~ .icon {
  color: var(--bulma-input-icon-hover-color)
}

Tradeoffs

The solution does create some junk, since the input and select classes are grouped together.

// Bad selectors
.control.has-icons-left .input:has(select:hover) ~ .icon,
.control.has-icons-right .input:has(select:hover) ~ .icon {
  color: var(--bulma-input-icon-hover-color)
}

Testing Done

Added the fix (as CSS) to an app I'm currently working on. Looks good.

Changelog updated?

No.