Inputbox with label inside slider

by RaviMakwana

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
<div class="col-xs-6">
  <div class="floating-label-group">
    <input type="text" id="username" class="form-control" autocomplete="off" autofocus required />
    <label class="floating-label">Username</label>
  </div>

  <div class="floating-label-group">
    <input type="password" id="password" class="form-control" autocomplete="off" required />
    <label class="floating-label">Password</label>
  </div>
</div>

CSS

.floating-label-group {
	position: relative;
	margin-top: 15px;
	margin-bottom: 25px;
}
.floating-label-group	.floating-label {
		font-size: 13px;
		color: #cccccc;
		position: absolute;
		pointer-events: none;
		top: 3px;
		left: 12px;
		transition: all 0.1s ease;
	}

.floating-label-group	input:focus ~ .floating-label,
.floating-label-group	input:not(:focus):valid ~ .floating-label {
		top: -15px;
		bottom: 0px;
		left: 0px;
		font-size: 11px;
		opacity: 1;
		color: #404040;
	}