Input focus effect with only CSS
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 - 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!
*/
Developer | Twikito |
Username | Twikito |
Uploaded | September 11, 2022 |
Rating | 3 |
Size | 4,411 Kb |
Views | 40,480 |
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!
Name | Size |
Beautiful Textual Map of the USA with CSS | 7,816 Kb |
Beautiful Textual Map of France with CSS | 5,035 Kb |
Lightbox without JS, with lazy load | 3,701 Kb |
Picture hover effect with pseudo-elements | 2,749 Kb |
Beautiful Textual Map of French towns with CSS | 6,387 Kb |
CSS-only shadow-scrolling effect | 3,062 Kb |
Tooltip with pseudo-element | 2,763 Kb |
Menu item 3D effect on hover with only css | 2,710 Kb |
Summary with pseudo-element | 2,971 Kb |
Breadcrum for shopping path with only css | 2,793 Kb |
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!
Name | Username | Size |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
A Pen by Matt Popovich | Mpopv | 3,349 Kb |
Sticky notes with CSS3 | HaiNguyen007 | 2,146 Kb |
Gradients | Karpovsystems | 2,394 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
To Do List with Delete | Mattlbrody | 2,068 Kb |
Hello People | Danburrows | 2,365 Kb |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
A Pen by James Podles | Jpod | 2,656 Kb |
Ghost | Mghayour | 11,738 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!