<div class="lab-container">
<div class="lab-grid">
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="text" class="floating-label-field floating-label-field--s1" id="field-1" placeholder="Text">
<label for="field-1" class="floating-label">Text</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="email" class="floating-label-field floating-label-field--s1" id="field-2" placeholder="Email">
<label for="field-2" class="floating-label">Email</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="url" class="floating-label-field floating-label-field--s1" id="field-3" placeholder="Website">
<label for="field-3" class="floating-label">Website</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="tel" class="floating-label-field floating-label-field--s1" id="field-4" placeholder="Phone">
<label for="field-4" class="floating-label">Phone</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="text" class="floating-label-field floating-label-field--s1" id="field-5" placeholder="Another Text">
<label for="field-5" class="floating-label">Another Text</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="text" class="floating-label-field floating-label-field--s1" id="field-6" placeholder="One More Text">
<label for="field-6" class="floating-label">One More Text</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-full lab-grid-full">
<div class="floating-label-wrap">
<textarea class="floating-label-field floating-label-field--s1" id="field-7" placeholder="Textarea" cols="15"></textarea>
<label for="field-7" class="floating-label">Textarea</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
</div><!-- .lab-grid -->
<div class="lab-grid">
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="text" class="floating-label-field floating-label-field--s2" id="field-1" placeholder="Text">
<label for="field-1" class="floating-label">Text</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="email" class="floating-label-field floating-label-field--s2" id="field-2" placeholder="Email">
<label for="field-2" class="floating-label">Email</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="url" class="floating-label-field floating-label-field--s2" id="field-3" placeholder="Website">
<label for="field-3" class="floating-label">Website</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="tel" class="floating-label-field floating-label-field--s2" id="field-4" placeholder="Phone">
<label for="field-4" class="floating-label">Phone</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="text" class="floating-label-field floating-label-field--s2" id="field-5" placeholder="Another Text">
<label for="field-5" class="floating-label">Another Text</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="text" class="floating-label-field floating-label-field--s2" id="field-6" placeholder="One More Text">
<label for="field-6" class="floating-label">One More Text</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-full lab-grid-full">
<div class="floating-label-wrap">
<textarea class="floating-label-field floating-label-field--s2" id="field-7" placeholder="Textarea" rows="15"></textarea>
<label for="field-7" class="floating-label">Textarea</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
</div><!-- .lab-grid -->
<div class="lab-grid">
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="text" class="floating-label-field floating-label-field--s3" id="field-1" placeholder="Text">
<label for="field-1" class="floating-label">Text</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="email" class="floating-label-field floating-label-field--s3" id="field-2" placeholder="Email">
<label for="field-2" class="floating-label">Email</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="url" class="floating-label-field floating-label-field--s3" id="field-3" placeholder="Website">
<label for="field-3" class="floating-label">Website</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="tel" class="floating-label-field floating-label-field--s3" id="field-4" placeholder="Phone">
<label for="field-4" class="floating-label">Phone</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="text" class="floating-label-field floating-label-field--s3" id="field-5" placeholder="Another Text">
<label for="field-5" class="floating-label">Another Text</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
<div class="floating-label-wrap">
<input type="text" class="floating-label-field floating-label-field--s3" id="field-6" placeholder="One More Text">
<label for="field-6" class="floating-label">One More Text</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
<div class="lab-grid-cell lab-grid-cell--mb-2x w-full lab-grid-full">
<div class="floating-label-wrap ">
<textarea class="floating-label-field floating-label-field--s3" id="field-7" placeholder="Textarea" rows="15"></textarea>
<label for="field-7" class="floating-label">Textarea</label>
</div><!-- .floating-label-wrap -->
</div><!-- .lab-grid-cell lab-grid-cell--mb-2x -->
</div><!-- .lab-grid -->
</div>
:root {
--accent: #82589F;
--input-label: var(--text-sec);
--input-label-focus: color-mix(in hsl, var(--input-label), black 50%);
--input-box-bg: color-mix(in hsl, color-mix(in hsl, var(--accent), black 80%), white 2%);
--input-box-bg-focus: color-mix(in hsl, color-mix(in hsl, var(--accent), black 80%), white 5%);
--input-box-border: color-mix(in hsl, color-mix(in hsl, var(--accent), black 80%), white 10%);
--input-box-border-focus: color-mix(in hsl, color-mix(in hsl, var(--accent), black 75%), white 30%);
}
.lab-container {
padding-block: 7rem;
max-width: 800px;
margin-inline: auto;
}
.lab-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
}
.lab-grid-full {
grid-column: 1 / -1;
}
.lab-grid + .lab-grid {
margin-top: 5rem;
}
/* Making the label break the flow */
.floating-label
{
position: absolute;
top: 0;
left: 0;
user-select: none;
z-index: 50;
}
/* Hide the browser-specific focus styles */
.floating-label-field
{
color: var(--text-pri);
border-width: 0;
z-index: 55;
}
.floating-label-field:focus
{
outline: 0;
box-shadow: none;
}
.floating-label-field::placeholder
{
color: var(--text-sec);
}
/* Make the label and field look identical on every browser */
.floating-label,
.floating-label-field
{
font: inherit;
line-height: 1;
display: block;
width: 100%;
}
.floating-label-field,
.floating-label-wrap
{
position: relative;
}
/* Input Style #1 */
.floating-label-field--s1
{
transition: border-color .25s ease-in-out;
border-bottom: 3px solid var(--input-box-border);
background-color: transparent;
}
.floating-label-field--s1 + .floating-label
{
transition: transform .25s, opacity .25s ease-in-out;
transform-origin: 0 0;
color: var(--input-label);
}
.floating-label-field--s1:focus,
.floating-label-field--s1:not(:placeholder-shown)
{
border-color: var(--input-box-border-focus);
}
.floating-label-field--s1:focus + .floating-label,
.floating-label-field--s1:not(:placeholder-shown) + .floating-label
{
transform: translate(.25em, -30%) scale(.8);
color: var(--input-label-focus);
}
.floating-label-field--s1:valid:not(:placeholder-shown)
{
border-color: rgba(46, 213, 115, .3);
}
.floating-label-field--s1:invalid
{
border-color: rgba(255, 71, 87, .3);
}
/* Input Style #2 */
.floating-label-field--s2
{
transition: background-color .25s ease-in-out;
border: 2px solid var(--input-box-border);
border-radius: 5px;
background-color: var(--input-box-bg);
}
.floating-label-field--s2 + .floating-label
{
visibility: hidden;
transition: transform .25s, visibility .5s, opacity .5s ease-in-out;
color: var(--input-label-focus);
opacity: 0;
}
.floating-label-field--s2:focus + .floating-label,
.floating-label-field--s2:not(:placeholder-shown) + .floating-label
{
visibility: visible;
transform: translateY(-80%);
opacity: 1;
}
.floating-label-field--s2:focus::placeholder {
color: transparent;
}
.floating-label-field--s2:valid:not(:placeholder-shown)
{
border-color: #adefc8;
background-color: #adefc8;
}
.floating-label-field--s2:invalid
{
border-color: #ffe0e3;
background-color: #ffe0e3;
}
.floating-label-field--s3
{
padding: 1.5em;
transition: border-color .25s ease-in-out;
border: 2px solid var(--input-box-border);
border-radius: 5px;
background-color: transparent;
}
.floating-label-field--s3 + .floating-label
{
position: absolute;
top: .75em;
left: .75em;
display: inline-block;
width: auto;
margin: 0;
padding: .75em;
transition: transform .25s, opacity .25s, padding .25s ease-in-out;
transform-origin: 0 0;
color: var(--input-label);
}
.floating-label-field--s3:focus,
.floating-label-field--s3:not(:placeholder-shown)
{
border-color: var(--input-box-border-focus);
}
.floating-label-field--s3:focus + .floating-label,
.floating-label-field--s3:not(:placeholder-shown) + .floating-label
{
z-index: 55;
padding: .75em;
transform: translate(0, -2em) scale(.9);
background-color: var(--surface-pri);
color: var(--input-label-focus);
}
/* Common Styles */
/* Identical inputs on all browsers */
.floating-label-field--s1:not(textarea),
.floating-label-field--s2:not(textarea),
.floating-label-field--s3:not(textarea)
{
max-height: 4em;
}
.floating-label-field--s1,
.floating-label-field--s1 + .floating-label,
.floating-label-field--s2,
.floating-label-field--s2 + .floating-label
{
padding: 1.5em;
}
.floating-label-field--s1 + .floating-label,
.floating-label-field--s2 + .floating-label
{
z-index: 50;
}
.floating-label-field--s1::placeholder,
.floating-label-field--s3::placeholder
{
color: transparent;
}