I am attempting to implement a floating label on a bootstrap selectpicker using only CSS. In my code, I am trying to float the label with bootstrap-select:focus, however, this line of code is not functioning in the CSS. Surprisingly, using bootstrap-select:active seems to work while holding down the mouse.
Initially, I successfully applied the floating label to a normal select box by using form-control. However, I prefer my select box to be more functional and visually appealing, so I decided to utilize selectpicker instead. Within form-control, I utilized :focus and :valid to determine the selectbox's state and apply the floating label. You can view an example with form-control here.
The following code snippet uses .bootstrap-select:active, which works when clicked with the mouse:
.bootstrap-select:active + .form-control-placeholder {
color: #da3338 !important;
transform: translate(0, -1.2em);
font-size: 70%;
transition: 0.2s ease-in-out;
}
You can see an example with selectpicker here.
My goal is to have the label float when the selectbox is focused or when a valid option is selected from the drop-down menu. While I prefer a solution using pure CSS, I am open to utilizing JS/jQuery if necessary. Any assistance would be greatly appreciated.