Awesome Input Type Text Focus Effects Using CSS

In this tutorial, you will learn how to add awesome css effects like input border, background, placeholder effects on focus. And also learn placeholder move as a label on input focus.

Here is an example if you want to quickly use it. Try it.

[code]</pre>
<h4><span style="color: #ff0000;">HTML –</span></h4>
 
<div class="col-3 input-effect"><label>First Name</label></div>
[/code]

CSS –

[code].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-1{
border: 0;
padding: 4px 0;
border-bottom: 1px solid #ccc;
background-color: transparent;
}

.effect-1 ~ .focus-border{
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #3399FF;
transition: 0.4s;
}

.effect-1:focus ~ .focus-border,
.has-content.effect-1 ~ .focus-border{
width: 100%;
transition: 0.4s;
}

.effect-1 ~ label{
position: absolute;
left: 0;
width: 100%;
top: 9px;
color: #aaa;
transition: 0.3s;
z-index: -1;
letter-spacing: 0.5px;
}

.effect-1:focus ~ label,
.has-content.effect-1 ~ label{
top: -16px;
font-size: 12px;
color: #3399FF;
transition: 0.3s;
}[/code]

JQUERY –

[code]
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

$(window).load(function(){
$(".col-3 input").val("");
$(".input-effect input").focusout(function(){
if($(this).val() != ""){
$(this).addClass("has-content");
}else{
$(this).removeClass("has-content");
}
});
});
[/code]

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .

Bonus: We also give training on following topics:

1. Angular Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.