I want to use floating labels with some input fields. The for is based on Bootstrap 4 styles but I can't change the structure of the elements.
I found this example for floating labels: https://www.cssscript.com/demo/bootstrap-4-form-floating-labels/
The problem is, that the HTML structure is different and in the example the input field comes before the label field. It's the opposite in my code and I can't change that part.
I figured out, that the CSS in the example works only if the structure is the same. Here's the CSS code which doesn't work with my structure:
.form-label-group input:not(:placeholder-shown) ~ label {
padding-top: calc(var(--input-padding-y) / 3);
padding-bottom: calc(var(--input-padding-y) / 3);
font-size: 12px;
color: blue;
}
It needs the label after the input.
My HTML structure looks like this:
<p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10">
<label for="billing_first_name" class="">First Name <abbr class="required" title="required">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text form-control" name="billing_first_name" id="billing_first_name" placeholder="" value="First Name" autocomplete="given-name">
</span>
</p>
As you can see, the label comes before the input.
I couldn't figure out how to change that.
If I change the CSS to this:
.form-label-group label ~ span input:not(:placeholder-shown) {
It will style the input instead of the label element.
Is there any other way?
