Input focus effect with only CSS

Developer
Size
4,411 Kb
Views
40,480

How do I make an input focus effect with only css?

Inspired by Codrops.. What is a input focus effect with only css? How do you make a input focus effect with only css? This script and codes were developed by Twikito on 11 September 2022, Sunday.

Input focus effect with only CSS Previews

Input focus effect with only CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Input focus effect with only CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Droid+Serif'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="demo1">	<div>	<input id="inp1" type="text" required>	<label for="inp1"><span>name</span></label>	</div>	<div>	<input id="inp2" type="text" required>	<label for="inp2"><span>pseudo</span></label>	</div>
</section>
<section class="demo2">	<div>	<input id="inp1" type="text" required>	<label for="inp1"><span>name</span></label>	</div>	<div>	<input id="inp2" type="text" required>	<label for="inp2"><span>pseudo</span></label>	</div>
</section>
<section class="demo3">	<div>	<input id="inp1" type="text" required>	<label for="inp1"><span>name</span></label>	</div>	<div>	<input id="inp2" type="text" required>	<label for="inp2"><span>pseudo</span></label>	</div>
</section> <script src="js/index.js"></script>
</body>
</html>

Input focus effect with only CSS - Script Codes CSS Codes

body { text-align: center;
}
div { position: relative; display: inline-block; width: 15em; margin: 2em;
}
input { width: 100%; box-sizing: border-box; outline: none;
}
label { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
}
/* DEMO 1 */
.demo1 label::before, .demo1 label::after { content: ''; position: absolute; top: 0; bottom: 0; border: .3em solid white;
}
.demo1 label::before { left: 0; right: 50%; border-right: 0;
}
.demo1 label::after { left: 50%; right: 0; border-left: 0;
}
.demo1 span { position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
.demo1 input, .demo1 span { padding: .5em; margin: 0; border: 0; font: 1.5em/1.5 "droid serif", serif; text-align: center; color: white; background: none;
}
.demo1 span, .demo1 label::before, .demo1 label::after { -webkit-transition: -webkit-transform .2s ease-out; transition: -webkit-transform .2s ease-out; transition: transform .2s ease-out; transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}
.demo1 input:focus + label span, .demo1 input:valid + label span { -webkit-transform: translateY(2em) scale(0.8); transform: translateY(2em) scale(0.8);
}
.demo1 input:focus + label::before, .demo1 input:valid + label::before { -webkit-transform: translateX(-1em); transform: translateX(-1em);
}
.demo1 input:focus + label::after, .demo1 input:valid + label::after { -webkit-transform: translateX(1em); transform: translateX(1em);
}
/* DEMO 2 */
.demo2 label::before, .demo2 label::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; background: white;
}
.demo2 label::before { top: 0;
}
.demo2 label::after { bottom: 0;
}
.demo2 span { position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
.demo2 input, .demo2 span { padding: .5em; margin: 0; border: 0; font: 1.2em/1.5 "droid serif"; text-align: left; color: white; background: none;
}
.demo2 span, .demo2 label::before, .demo2 label::after { -webkit-transition: -webkit-transform .2s ease-out; transition: -webkit-transform .2s ease-out; transition: transform .2s ease-out; transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}
.demo2 input:focus + label span, .demo2 input:valid + label span { -webkit-transform: translateY(-2.25em); transform: translateY(-2.25em);
}
.demo2 input:focus + label::before, .demo2 input:valid + label::before { -webkit-transform: translateY(-0.3em); transform: translateY(-0.3em);
}
.demo2 input:focus + label::after, .demo2 input:valid + label::after { -webkit-transform: translateY(0.3em); transform: translateY(0.3em);
}
/* DEMO 3 */
.demo3 label { overflow: hidden;
}
.demo3 label::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 300%; -webkit-transition: -webkit-transform .7s ease-out; transition: -webkit-transform .7s ease-out; transition: transform .7s ease-out; transition: transform .7s ease-out, -webkit-transform .7s ease-out; background: no-repeat url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIHdpZHRoPSIzMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMjAwIDYwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iM3B4IiBkPSJNMCw1Ni41YzAsMCwyOTguNjY2LDAsMzk5LjMzMywwQzQ0OC4zMzYsNTYuNSw1MTMuOTk0LDQ2LDU5Nyw0NmM3Ny4zMjcsMCwxMzUsMTAuNSwyMDAuOTk5LDEwLjVjOTUuOTk2LDAsNDAyLjAwMSwwLDQwMi4wMDEsMCI+PC9wYXRoPjwvc3ZnPg==);
}
.demo3 input { width: 100%; box-sizing: border-box; outline: none;
}
.demo3 span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition: opacity .2s ease-in-out .15s; transition: opacity .2s ease-in-out .15s;
}
.demo3 input, .demo3 span { padding: .2em .5em; margin: 0; border: 0; font: 1.5em/1.5 "droid serif"; text-align: left; color: white; background: none;
}
.demo3 input:focus + label span, .demo3 input:valid + label span { opacity: 0;
}
.demo3 input:focus + label::after, .demo3 input:valid + label::after { -webkit-transform: translateX(-66.6%); transform: translateX(-66.6%);
}
/* misc */
html, body { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #3498db; color: white;
}

Input focus effect with only CSS - Script Codes JS Codes

/*	NO JS!
*/
Input focus effect with only CSS - Script Codes
Input focus effect with only CSS - Script Codes
Home Page Home
Developer Twikito
Username Twikito
Uploaded September 11, 2022
Rating 3
Size 4,411 Kb
Views 40,480
Do you need developer help for Input focus effect with only CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Twikito (Twikito) Script Codes
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!