WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
इनपुट टैग
1426
cleanapp42
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
21 July 2025
SVG आइकन के साथ फ़ाइल अपलोड इनपुट
10 August 2024
सरल इनपुट फ़ील्ड
19 October 2024
एनिमेटेड HTML और CSS इनपुट
HTML
Copy
Username
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); * { padding: 0; margin: 0; font-family: "poppins", sans-serif; box-sizing: border-box; font-weight: 500; } body { min-height: 100svh; width: 100%; display: flex; align-items: center; justify-content: center; } .input-container { position: relative; max-width: 350px; width: 100%; height: 45px; } input { width: 100%; height: 100%; outline: none; border-radius: .3rem; border: 1.5pt solid #ccc; padding-left: 16px; font-size: 17px; } label { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 18px; transition: all 0.2s ease-in-out; color: #aaa; pointer-events: none; } input:focus+label, input:valid+label { left: 14px; font-size: 15px; top: 0; color: #111; line-height: 1; background-color: #fff; padding-inline: 5px; font-weight: 600; } input:focus, input:valid { border-color: #111; }
JS
Copy