Text Inputs with Sliding Labels
How do I make an text inputs with sliding labels?
Labels mimic placeholders, then slide out of the way upon focus. Good for accessibility because the labels stay visible.. What is a text inputs with sliding labels? How do you make a text inputs with sliding labels? This script and codes were developed by Keith Pickering on 10 August 2022, Wednesday.
Text Inputs with Sliding Labels - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text Inputs with Sliding Labels</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:before,
*:after { box-sizing: border-box;
}
body { padding: 4em;
}
.input-wrap { position: relative; max-width: 400px;
}
.text-input { display: block; height: 40px; width: 100%; margin-bottom: 30px; padding: 0 10px; border: 2px solid #CFD8DC; background-color: #fbfbfc; outline: 0; appearance: none; transition: all 150ms;
}
.text-input:hover { border-color: #8bd7fa;
}
.text-input:focus { border-color: #29B6F6; background-color: white;
}
.text-input:focus + .text-label { transform: translate(0, -18px); font-size: 12px; color: rgba(0, 0, 0, 0.6);
}
.text-label { position: absolute; top: 0; display: block; transform: translate(10px, 10px); font-size: 16px; color: rgba(0, 0, 0, 0.4); cursor: text; transition: all 150ms;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="input-wrap">
<input id="name" class="text-input" type="text">
<label for="name" class="text-label">Name</label>
</div>
<div class="input-wrap">
<input id="email" class="text-input" type="text">
<label for="email" class="text-label">Email</label>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Text Inputs with Sliding Labels - Script Codes CSS Codes
*, *:before,
*:after { box-sizing: border-box;
}
body { padding: 4em;
}
.input-wrap { position: relative; max-width: 400px;
}
.text-input { display: block; height: 40px; width: 100%; margin-bottom: 30px; padding: 0 10px; border: 2px solid #CFD8DC; background-color: #fbfbfc; outline: 0; appearance: none; transition: all 150ms;
}
.text-input:hover { border-color: #8bd7fa;
}
.text-input:focus { border-color: #29B6F6; background-color: white;
}
.text-input:focus + .text-label { transform: translate(0, -18px); font-size: 12px; color: rgba(0, 0, 0, 0.6);
}
.text-label { position: absolute; top: 0; display: block; transform: translate(10px, 10px); font-size: 16px; color: rgba(0, 0, 0, 0.4); cursor: text; transition: all 150ms;
}
Developer | Keith Pickering |
Username | keithpickering |
Uploaded | August 10, 2022 |
Rating | 3 |
Size | 2,892 Kb |
Views | 32,384 |
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 |
Single-element Toggle Switch | 3,875 Kb |
Sliding Navigation Menu | 3,440 Kb |
CSS Business Card | 185,152 Kb |
Material Inspired Menu | 4,237 Kb |
Lovely Transforming Menu Button | 11,445 Kb |
Image with inset shadow | 2,311 Kb |
Delicious SASS Buttons | 8,496 Kb |
Notifications | 5,681 Kb |
Windows 10 Concept | 16,180 Kb |
Smooth, Semantic Tab Box | 4,256 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 |
Sass Get Function | Lukewatts | 2,155 Kb |
JQuery FullScreen Overlay | _codemics | 2,252 Kb |
Random Gradients - JS | Aldlevine | 2,026 Kb |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
Long Shadow Button | Uixcrazy | 3,550 Kb |
The Rope | Chribbe | 2,886 Kb |
Jstam.com Home Page | Jstam | 10,558 Kb |
CSS3 Animated buttons | Cguillou | 3,737 Kb |
Update CSS Variables with JS | Wesbos | 2,335 Kb |
Simple Login Form | JoshBlackwood | 4,418 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!