Step1:
Welcome to designer blog, here we are going to discuss about, How to make the awesome input focus effects using css3
Step2:
To make the input focus effect jquery plays the important role to add and remove the css. There are two methods in jquery play an important roles focus in and focus out.
<script>
// JavaScript for label effects only
$(window).load(function(){
$(".input-effect input").focusin(function(){
console.log("focus in");
if($(this).val() != ""){
$(this).removeClass("new");
}
else {
$(this).addClass("has-content");
}
})
$(".input-effect input").focusout(function(){
console.log("focus out");
if($(this).val() != ""){
//$(this).addClass("new");
$(this).removeClass("has-content").addClass("has-new");
}
else {
$(this).removeClass("has-content").removeClass("has-new");;
}
})
});
</script>
Step3:
Below are the source code for awesome input focus effects using css3
Html Markup
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Awesome input focus effects using css3 - usingcss3</title>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
<!-- CSS includes -->
<link rel="stylesheet" type="text/css" href="css/input-style.css">
<!-- CSS includes end -->
</head>
<body>
<div class="row">
<div class="container">
<h2>Input with Label Effects</h2>
<div class="col-3 input-effect">
<input class="effect-16" type="text" placeholder="">
<label>First Name</label>
<span class="focus-border"></span>
</div>
<div class="col-3 input-effect">
<input class="effect-16" type="text" placeholder="">
<label>First Name</label>
<span class="focus-border"></span>
</div>
<div class="col-3 input-effect">
<input class="effect-16" type="text" placeholder="">
<label>First Name</label>
<span class="focus-border"></span>
</div>
</div>
</div>
<!-- Script here -->
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
// JavaScript for label effects only
$(window).load(function(){
$(".input-effect input").focusin(function(){
console.log("focus in");
if($(this).val() != ""){
$(this).removeClass("new");
}
else {
$(this).addClass("has-content");
}
})
$(".input-effect input").focusout(function(){
console.log("focus out");
if($(this).val() != ""){
//$(this).addClass("new");
$(this).removeClass("has-content").addClass("has-new");
}
else {
$(this).removeClass("has-content").removeClass("has-new");;
}
})
});
</script>
</body>
</html>
/*= Reset CSS
============= */
html, body {border: 0; margin: 0; padding: 0;}
body {font: 14px "Lato", Arial, sans-serif; min-width: 100%; min-height: 100%; color: #666;}
.container{margin: 0 auto; max-width: 1200px;}
*{margin: 0; padding: 0; box-sizing: border-box;}
.row{float: left; width: 100%; padding: 20px 0 50px;}
h2{text-align: center; color: #2079df; font-size: 28px; float: left; width: 100%; margin: 30px 0; position: relative; line-height: 58px; font-weight: 400;}
h2:before{content: ""; position: absolute; left: 50%; bottom: 0; width: 100px; height: 2px; background-color: #2079df; margin-left: -50px;}
/*= Reset CSS End
================= */
/*= input focus effects css
=========================== */
:focus{outline: none;}
.col-3{float: left; width: 27.33%; margin: 40px 3%; position: relative;} /* necessary to give position: relative to parent. */
input[type="text"]{font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;}
.effect-16,
.effect-17,
.effect-18{border: 0; padding: 4px 0; border-bottom: 1px solid #ccc; background-color: transparent;}
.effect-16 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.effect-16:focus ~ .focus-border,
.has-content.effect-16 ~ .focus-border{width: 100%; transition: 0.4s;}
.effect-16 ~ label{position: absolute; left: 0; width: 100%; top: 9px; color: #aaa; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
.effect-16:focus ~ label, .has-content.effect-16 ~ label{top: -16px; font-size: 12px; color: #3399FF; transition: 0.3s;}
/*= input focus effects css End
=============================== */
.has-new.effect-16 ~ .focus-border
{
width: 100%;
transition: 0s !important;
background-color:#ccc;border: none;
height: 1px;
}
.has-new:focus ~ label, .has-new.effect-16 ~ label
{
top: -16px;
font-size: 12px;
color: #3399FF;
transition: 0s !important;
}
Step4 :
Output
