Float Labelsv2.0

Pure CSS Float Labels with Bootstrap5 and Select2 support

Demos

Input Field
	
	<div class="float-label">
		<input type="text" id="full-name" class="form-control" placeholder=".">
		<label for="full-name">Blank Input</label>
	</div>
	
	
Select
	
	<div class="float-label">
		<select id="field-select" class="form-control">
			<option selected disabled>- SELECT -</option>
			<option value="option1">Option 1</option>
			<option value="option2">Option 2</option>
			<option value="option3" disabled>Option 3</option>
			<option value="option4">Option 4</option>
			<option value="option5">Option 5</option>
		</select>
		<label for="field-select">Job Title</label>
	</div>
	
	
Textarea
	
	<div class="float-label">
		<textarea id="field-textarea" class="form-control" rows="3" placeholder="."></textarea>
		<label for="field-textarea">Internal Notes</label>
	</div>
	
	

Tests (no framework)

blank
blank, disabled
blank, readonly
has value
has value, disabled
has value, readonly
input
input [required]
input (placeholder blank)
input (no placeholder)
textarea
textarea [required]
select
deprecated
deprecated
select [required]
deprecated
deprecated
select [multiple]
deprecated
deprecated
select [multiple][required]
deprecated
deprecated

Tests (Bootstrap 5)

blank
blank, disabled
blank, readonly
has value
has value, disabled
has value, readonly
input (sm)
input (sm) [required]
input
input [required]
input (lg)
input (lg) [required]
input (placeholder blank)
input (no placeholder)
textarea
textarea [required]
select (sm)
deprecated
deprecated
select (sm) [required]
deprecated
deprecated
select
deprecated
deprecated
select [required]
deprecated
deprecated
select (lg)
deprecated
deprecated
select (lg) [required]
deprecated
deprecated
select [multiple]
deprecated
deprecated
select [multiple][required]
deprecated
deprecated

Tests (Bootstrap 5) - input groups

blank
blank, disabled
blank, readonly
has value
has value, disabled
has value, readonly
input (sm)
input (sm) [required]
input
input [required]
input (lg)
input (lg) [required]

Tests (Select2)

blank
blank, disabled
blank, readonly
has value
has value, disabled
has value, readonly
Select2
deprecated
deprecated
Select2 [required]
deprecated
deprecated