adamculpepper / pure-css-float-labels

Pure CSS Float Labels with Bootstrap5 and Select2 support

Pure CSS Float Labels

Float Labels for Bootstrap4 (with support for <input>, <select>, <textarea> and Select2)

Features

• Pure CSS only Float Labels
• Support for <input>, <select> and <textarea> elements
• Support for [disabled] and [readonly] attributes
• Support for Select2 (with some JS needed to be added)
• Error handling for missing needed tags and attributes

TODO

• get <textarea> elements working
• create demo site
• get normal <select> elements working 100%
• error handling for Select2 missing 'placeholder' attribute or 'label' tag
• support for clearing the Select2 value using jQuery (doesn't trigger change event this way)

Original Float Label pattern creator: https://dribbble.com/shots/1254439--GIF-Float-Label-Form-Interaction

pure-css-float-labels's Issues

Review other file input "types"

<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="search">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<meter>
<progress>

<label for="cars">Choose a car:</label>
<select id="cars">
	<optgroup label="Swedish Cars">
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
	</optgroup>
	<optgroup label="German Cars">
		<option value="mercedes">Mercedes</option>
		<option value="audi">Audi</option>
	</optgroup>
</select>```

Consider fixing styles for input-lg (class in bootstrap 4)

Add icon to field errors

Bootstrap4's method:

border-color: #dc3545;
padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);

Add support for type="file"

Dig into Bootstrap is doing theirs and modify to work better for float labels.

https://getbootstrap.com/docs/4.4/components/forms/#file-browser

Design changes in upcoming Select2 4.1.0 release

Hi there, this appears to be a theme for Select2 and I wanted to give you a heads up about upcoming changes to the Select2 CSS/HTML in the next, release 4.1.0. The release date for this theme has not yet been determined, but we are about to roll 4.1.0-beta.1 which features many of these changes.

• Dedicated classes have been introduced to handle highlights instead of only using ARIA attributes: select2/select2#5841
• aria-selected no longer reflects selected results and instead reflects the highlighted result: select2/select2#5841
• Clear/remove icons have been switched to use <button> tags instead of clickable <span> tags: select2/select2#5842
• The location of the clear button has been moved outside of the rendered selection area: select2/select2#5842
• The location of the search box on a multiple select has been moved outside of the rendered selection area: select2/select2#5842
• Selected choices in a multiple select are no longer aligned using CSS float: select2/select2#5842

While many of these should not significantly impact the display of this theme, some of these are going to require modifying the existing CSS to make it look Boostrap-like again. Unfortunately we do not believe that these changes are able to be made backwards-compatible with existing versions of Select2, largely because of the HTML changes that forced the multiple select to be rendered differently.

Feel free to reach out to us about any bugs you encounter or questions you have about these changes.

Add in error checking for label being before the input

Fix: Select arrow touches the text

Add Bootstrap `input-group` to demos

<div class="float-label input-group">
	<select id="record-type" class="form-select">
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
	</select>
	<label for="record-type">Insurance Company</label>
	<button class="btn btn-outline-secondary" type="button">Add Admin</button>
</div>

Auto filled text is breaking the float label position

Possible fixes: https://stackoverflow.com/questions/55427966/inputnotplaceholder-shown-label-selector-does-not-work-with-autofill