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]
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]
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]