WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
एनिमेटेड HTML और CSS इनपुट
1526
hasan
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
28 May 2024
हटाएँ बटन
21 May 2025
एनिमेटेड लैंप
10 September 2024
पेंगुइन
HTML
Copy
<div class="input-group"> <input required="" type="text" name="text" autocomplete="off" class="input"> <label class="user-label">First Name</label> </div> <div class="input-group"> <input required="" type="text" name="text" autocomplete="off" class="input"> <label class="user-label">Last Name</label> </div> <div class="input-group"> <input required="" type="email" name="email" autocomplete="off" class="input"> <label class="user-label">Enter your Email</label> </div>
CSS
Copy
body{ margin: 0; padding: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0b1522; } .input-group { position: relative; padding:20px; } .input { border: dotted 1.5px #9e9e9e; border-radius: 1rem; background: none; padding: 1rem; font-size: 1rem; color: #f5f5f5; transition: border 150ms cubic-bezier(0.4,0,0.2,1); } .user-label { position: absolute; left: 35px; color: #e8e8e8; pointer-events: none; transform: translateY(1rem); transition: 150ms cubic-bezier(0.4,0,0.2,1); } .input:focus, input:valid { outline: solid 1px; border: 1.5px solid #1a73e8; } .input:focus ~ label, input:valid ~ label { transform: translateY(-50%) scale(0.8); background-color: #212121; padding:0 .2em; color: #2196f3; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
