WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
इनपुट टैग
1095
cleanapp42
संपादक में खोलें
अपना कोड प्रकाशित करें
क्या आपको एक वेबसाइट चाहिए?
अनुशंसित
21 September 2024
पासवर्ड इनपुट लाइट
21 October 2024
एक तत्व के साथ एकल-अंकीय इनपुट
10 August 2024
सरल इनपुट फ़ील्ड
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