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 |
Tooltip with pseudo-element | 2,763 Kb |
Flexible Google-style loader with CSS | 2,473 Kb |
CSS-only shadow-scrolling effect | 3,062 Kb |
Full page table inside the grid | 1,864 Kb |
Easy CSS3 checkboxes and radio buttons | 2,742 Kb |
Beautiful Textual Map of France with CSS | 5,035 Kb |
Beautiful Textual Map of French towns with CSS | 6,387 Kb |
CSS3 trendy retro photo effect | 2,637 Kb |
Item menu effect with pseudo-element | 2,602 Kb |
Pure CSS Slider | 4,664 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 |
Starfield using KineticJS | Asp | 3,512 Kb |
Button Option Group | Honchoman | 1,859 Kb |
CSS Patterns | Alyda | 3,953 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
Table Exercise | Fresco | 9,585 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
Fading gradient button | Insprd | 1,713 Kb |
CSS eye follow | Pedrocampos | 2,592 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!