Input field label animation effect using HTML and CSS

Form Fields | December 10, 2021

In this article we will show you how to create. Input field label animation effect using HTML and CSS.

Video tutorial of Input field label animation effect using HTML and CSS

This tutorial video can help you to create Input field label animation effect using HTML and CSS

You might like this

Input field label animation effect using HTML and CSS[Source Codes]

This source code can help you to create Input field label animation effect using HTML and CSS

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="container">
		<div class="ui_text_field">
			<input type="text" name="first_name" value="" onchange="this.setAttribute('value', this.value);">
			<label>First Name</label>
		</div>
		<div class="ui_text_field">
			<input type="text" name="Last_name" value="" onchange="this.setAttribute('value', this.value);">
			<label>Last Name</label>
		</div>
	</div>

</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #000;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.container{
	width: 800px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	padding: 40px;
	background:#e4e4e4;
	border-radius: 15px;
}
.ui_text_field{
	width: 48%;
	position: relative;
}
.ui_text_field input{
	width: 100%;
	height: 50px;
	border:1px solid lightgray;
	padding: 15px;
	transition: all 0.3s ease-out;
	color:#737373;
	font-size: 16px;
	border-radius: 5px;
}
.ui_text_field label{
	position: absolute;
	left: 15px;
	top: 50%;
	transform:translateY(-50%);
	pointer-events: none;
	color:#737373;
	transition: all 0.3s ease-out;
}
.ui_text_field input:focus{
	outline: 0;
	border-width:2px; 
}
.ui_text_field input:focus + label{
	margin-top: -25px;
	color:#333;
}
.ui_text_field input:not([value=""]){
	border-width:2px; 
}
.ui_text_field input:not([value=""]) + label {
  margin-top: -25px;
  color:#333;
}