Bootstrap 5 floating labels

Floating labels.html

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Comments</label>
</div>

<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>

<style>
.form-floating {
  position: relative;
}

.form-floating > .form-control,
.form-floating > .form-select {
  height: -webkit-calc(3.5rem + 2px);
  height: calc(3.5rem + 2px);
  padding: 1rem .75rem;
}

.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem .75rem;
  pointer-events: none;
  border: 1px solid transparent;
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transition: opacity .1s ease-in-out, -webkit-transform .1s ease-in-out;
  transition: opacity .1s ease-in-out, -webkit-transform .1s ease-in-out;
  -o-transition: opacity .1s ease-in-out, transform .1s ease-in-out;
  transition: opacity .1s ease-in-out, transform .1s ease-in-out;
  transition: opacity .1s ease-in-out, transform .1s ease-in-out, -webkit-transform .1s ease-in-out;
}

.form-floating > .form-control::-webkit-input-placeholder {
  color: transparent;
}

.form-floating > .form-control:-ms-input-placeholder {
  color: transparent;
}

.form-floating > .form-control::-ms-input-placeholder {
  color: transparent;
}

.form-floating > .form-control::placeholder {
  color: transparent;
}

.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: .625rem;
}

.form-floating > .form-control:-webkit-autofill {
  padding-top: 1.625rem;
  padding-bottom: .625rem;
}

.form-floating > .form-select {
  padding-top: 1.625rem;
  padding-bottom: .625rem;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  opacity: .65;
  -webkit-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
      -ms-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
          transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating > .form-control:-webkit-autofill ~ label {
  opacity: .65;
  -webkit-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
          transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

@media (prefers-reduced-motion: reduce) {
  .form-floating > label {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}  
</style>

src.scss

// bootstrap 5 floating labels
.form-floating {
	position: relative;

	> .form-control,
	> .form-select {
		height: calc(3.5rem + 2px);
		padding: 1rem .75rem;
	}

	> label {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		padding: 1rem .75rem;
		pointer-events: none;
		border: 1px solid transparent;
		transform-origin: 0 0;
		transition: opacity .1s ease-in-out, transform .1s ease-in-out;
	}

	> .form-control {
		&::placeholder {
			color: transparent;
		}

		&:focus,
		&:not(:placeholder-shown) {
			padding-top: 1.625rem;
			padding-bottom: .625rem;
		}

		&:-webkit-autofill {
			padding-top: 1.625rem;
			padding-bottom: .625rem;
		}
	}

	> .form-select {
		padding-top: 1.625rem;
		padding-bottom: .625rem;
	}

	> .form-control:focus,
	> .form-control:not(:placeholder-shown),
	> .form-select {
		~ label {
			opacity: .65;
			transform: scale(.85) translateY(-.5rem) translateX(.15rem);
		}
	}

	> .form-control:-webkit-autofill {
		~ label {
			opacity: .65;
			transform: scale(.85) translateY(-.5rem) translateX(.15rem);
		}
	}
}

@media (prefers-reduced-motion:reduce) {
	.form-floating>label {
		transition: none
	}
}