Blog
This is popular nowadays to animate labels dynamically above the input field. It feels very cool and the user gets good feedback with animating input labels.
Check out the demo to get a closer look at it and also the Demo Source below to get the source code. This label animation is mostly dependent upon CSS styles for the logic here.
Demo
Open demo in a new window – https://demos.webdevpuneet.com/set1/float-input-labels/index.html
The label is selected and styled via the “input:placeholder-shown + label” method and “placeholder-shown” is taken as a switch case to style the two states i.e. shown and not shown.
CSS Used
I used CSS beautify online tool to make this CSS presentable with good indents for code clarity. You can also bookmark it to beautify your codes.
body {
font-family: Avenir Next, Avenir, SegoeUI, sans-serif;
}
form {
margin: 2em 0;
}
/**
* Make the field a flex-container, reverse the order so label is on top.
*/
.field {
display: flex;
flex-flow: column-reverse;
margin-bottom: 1em;
position: relative;
}
.field__clear {
position: absolute;
right: 0;
bottom: 10px;
cursor: pointer;
display: none;
}
/**
* Add a transition to the label and input.
* I'm not even sure that touch-action: manipulation works on
* inputs, but hey, it's new and cool and could remove the
* pesky delay.
*/
label,
input,
textarea {
transition: all 0.2s;
touch-action: manipulation;
transform-origin: left bottom;
}
input,
textarea {
font-size: 1.5em;
border: 0;
border-bottom: 1px solid #ccc;
font-family: inherit;
-webkit-appearance: none;
border-radius: 0;
padding: 0;
cursor: text;
}
input:focus,
,
textarea:focus {
outline: 0;
border-bottom: 1px solid #666;
}
label {
text-transform: uppercase;
letter-spacing: 0.05em;
}
/**
* Translate down and scale the label up to cover the placeholder,
* when following an input (with placeholder-shown support).
* Also make sure the label is only on one row, at max 2/3rds of the
* field—to make sure it scales properly and doesn't wrap.
*/
input:placeholder-shown + label,
textarea:placeholder-shown + label {
cursor: text;
max-width: 66.66%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transform: translate(0, 2.125rem) scale(1.5);
}
/**
* By default, the placeholder should be transparent. Also, it should
* inherit the transition.
*/
::-webkit-input-placeholder {
opacity: 0;
transition: inherit;
}
/**
* Show the placeholder when the input is focused.
*/
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
opacity: 1;
}
/**
* When the element is focused, remove the label transform.
* Also, do this when the placeholder is _not_ shown, i.e. when
* there's something in the input at all.
*/
input:not(:placeholder-shown) + label,
input:focus + label,
textarea:not(:placeholder-shown) + label,
textarea:focus + label {
transform: translate(0, 0) scale(1);
cursor: pointer;
}
/* Show input clear on filled input items */
input:not(:placeholder-shown) + label + .field__clear,
textarea:not(:placeholder-shown) + label + .field__clear {
display: block;
}You can also clear the input from the clear button/icon on the right-hand side, further adding to the user experience. This is done with a simple jQuery code logic here where the input fields are cleared on a ‘clear’ click. Other than this label returning to its previous state is done by CSS logic only.
jQuery Used
$('.field__clear').click(function () {
$this = $(this);
$this.closest('.field').find('input, textarea').val('');
});Here is a complete Source code of the demo shown above. You can directly copy-paste it to your HTML file and try it on your local.
Demo Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Float input labels with :placeholder shown</title>
<meta name="description" content="Float input labels with :placeholder shown" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="robots" content="INDEX,FOLLOW" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1>Float input labels with :placeholder shown</h1>
<div class="demo" style="margin-bottom:20px;">
<style>
body {
font-family: Avenir Next, Avenir, SegoeUI, sans-serif;
}
form {
margin: 2em 0;
}
/**
* Make the field a flex-container, reverse the order so label is on top.
*/
.field {
display: flex;
flex-flow: column-reverse;
margin-bottom: 1em;
position:relative;
}
.field__clear{
position:absolute;
right:0;
bottom:10px;
cursor:pointer;
display:none;
}
/**
* Add a transition to the label and input.
* I'm not even sure that touch-action: manipulation works on
* inputs, but hey, it's new and cool and could remove the
* pesky delay.
*/
label, input, textarea {
transition: all 0.2s;
touch-action: manipulation;
transform-origin: left bottom;
}
input, textarea {
font-size: 1.5em;
border: 0;
border-bottom: 1px solid #ccc;
font-family: inherit;
-webkit-appearance: none;
border-radius: 0;
padding: 0;
cursor: text;
}
input:focus, , textarea:focus {
outline: 0;
border-bottom: 1px solid #666;
}
label {
text-transform: uppercase;
letter-spacing: 0.05em;
}
/**
* Translate down and scale the label up to cover the placeholder,
* when following an input (with placeholder-shown support).
* Also make sure the label is only on one row, at max 2/3rds of the
* field—to make sure it scales properly and doesn't wrap.
*/
input:placeholder-shown + label,
textarea:placeholder-shown + label{
cursor: text;
max-width: 66.66%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transform: translate(0, 2.125rem) scale(1.5);
}
/**
* By default, the placeholder should be transparent. Also, it should
* inherit the transition.
*/
::-webkit-input-placeholder{
opacity: 0;
transition: inherit;
}
/**
* Show the placeholder when the input is focused.
*/
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
opacity: 1;
}
/**
* When the element is focused, remove the label transform.
* Also, do this when the placeholder is _not_ shown, i.e. when
* there's something in the input at all.
*/
input:not(:placeholder-shown) + label,
input:focus + label,
textarea:not(:placeholder-shown) + label,
textarea:focus + label{
transform: translate(0, 0) scale(1);
cursor: pointer;
}
/* Show input clear on filled input items */
input:not(:placeholder-shown) + label + .field__clear,
textarea:not(:placeholder-shown) + label + .field__clear{
display:block;
}
</style>
<form action="">
<div class="field">
<input type="text" name="fullname" id="fullname" placeholder="Jane Appleseed" />
<label for="fullname">Name</label> <span class="field__clear">clear</span>
</div>
<div class="field">
<input type="email" name="email" id="email" placeholder="[email protected]" />
<label for="email">Email</label> <span class="field__clear">clear</span>
</div>
<div class="field">
<textarea name="textarea" id="textarea" placeholder="Kutch bhi likh daalo here..."></textarea>
<label for="textarea">Textarea</label> <span class="field__clear"><i class="icon-clear-input"></i></span>
<span class="field__clear">clear</span>
</div>
<button type="submit">SUBMIT</button>
</form>
<script>
$('.field__clear').click(function(){
$this = $(this);
$this.closest('.field').find('input, textarea').val('');
});
</script>
</div>
<!-- End of demo code -->
<div class="article-link" style="margin-bottom:20px;"> <a href="https://webdevpuneet.com/float-labels-with-placeholder-shown/" target="_blank" style="display: inline-block; color:blue:!important;text-decoration: none;border:1px solid blue;color:blue;line-height:1;border-radius:25px;font-size:14px;padding:5px 20px;display:inline-block;">View article and source code »</a>
</div>
</div>
</body>
</html>
You must be logged in to post a comment.