Input Field Styles

.input-container-1 { position: relative; }\n.input-1:focus + label { transform: translateY(-20px); font-size: 12px; }

.input-2:focus { border: 2px solid #ef4444; box-shadow: 0 0 10px #ef4444; }

.input-container-3 { position: relative; }\n.input-3:focus + .icon { opacity: 1; transform: translateX(0); }

.input-4 { border-bottom: 2px solid #3b82f6; }\n.input-4:focus { border-bottom-width: 4px; }

.input-container-5 { position: relative; }\n.clear-btn { display: none; }\n.input-5:not(:placeholder-shown) + .clear-btn { display: block; }

.input-container-6 { position: relative; }\n.toggle-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }

.input-container-7 { position: relative; }\n.counter { position: absolute; bottom: -20px; right: 0; }

.input-8 { border: 2px solid #3b82f6; transition: border-radius 0.3s; }\n.input-8:focus { border-radius: 20px; }

.input-9:focus { box-shadow: 0 0 10px #facc15; }

.input-10::placeholder { animation: shimmer 2s infinite; }\n@keyframes shimmer { 50% { opacity: 0.5; } }

.input-11::placeholder { transform: translateY(0); transition: transform 0.3s; }\n.input-11:focus::placeholder { transform: translateY(-10px); }

.input-12:focus { transform: scale(1.05); transition: transform 0.3s; }

.input-13 { border: 2px solid #3b82f6; }\n.input-13:focus { border-width: 4px; animation: elastic 0.5s; }\n@keyframes elastic { 50% { border-width: 6px; } }

.input-14.invalid { animation: shake 0.3s; }\n@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.input-container-15 { position: relative; }\n.input-15:focus + .tooltip { opacity: 1; }

.input-16:-webkit-autofill { background: #fef3c7; }

.input-17::placeholder { opacity: 1; transition: opacity 0.3s; }\n.input-17:focus::placeholder { opacity: 0; }

.input-18 { background: linear-gradient(45deg, #ef4444, #3b82f6); color: #fff; }\n.input-18::placeholder { color: #e5e7eb; }

.input-19 { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); color: #fff; }

.input-20 { border: none; background: transparent; }\n.input-20:focus { outline: none; border-bottom: 1px solid #fff; }

.input-21 { border: 2px solid #3b82f6; border-radius: 20px; }\n.input-21:focus { box-shadow: 0 0 5px #3b82f6; }

.input-22:focus { transform: scale(1.05); animation: kinetic 0.5s; }\n@keyframes kinetic { 50% { transform: scale(1.1); } }

.input-container-23 { position: relative; }\n.input-23:focus + label { transform: translateX(-20px); }

.input-24 { font-family: monospace; }\n/* Use JS for masking (e.g., phone number) */

.input-25:focus { box-shadow: 0 0 15px #ef4444; animation: neon 1s infinite; }\n@keyframes neon { 50% { box-shadow: 0 0 20px #ef4444; } }

.input-26 { background: linear-gradient(45deg, #ef4444, #3b82f6) fixed; color: #fff; }

.input-27:focus { background: #fef3c7; transition: background 0.2s; }

.input-container-28 label { background: #ef4444; transform: skew(-20deg); position: absolute; top: -10px; left: 10px; padding: 2px 8px; }

.input-29.scrolled { border-color: #facc15; }\n/* Use JS to add 'scrolled' class on scroll */

.input-30 { border-bottom: 2px solid #3b82f6; }\n.input-30:focus { animation: split 0.5s forwards; }\n@keyframes split { to { border-bottom-width: 4px; } }

.input-container-31 label { position: sticky; top: -10px; background: #fff; padding: 0 4px; }

.input-32 { background: linear-gradient(45deg, #ff0000, #0000ff); animation: thermal 2s infinite; color: #fff; }\n@keyframes thermal { 50% { background: linear-gradient(45deg, #0000ff, #ff0000); } }

.input-33 { border-bottom: 2px solid #3b82f6; }\n.input-33:focus { animation: swipe 0.5s forwards; }\n@keyframes swipe { to { border-bottom-color: #ef4444; } }

.input-container-34 { position: relative; }\n.input-34 { background: transparent; }\n.bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }

.input-35 { border-bottom: 2px solid #3b82f6; }\n.input-35:focus { border-image: linear-gradient(to right, #3b82f6, #ef4444) 1; animation: wave 1s infinite; }\n@keyframes wave { 50% { border-image-slice: 1; } }

.input-36:focus { filter: contrast(1.5); }

.input-37 { appearance: none; width: 40px; height: 20px; background: #d1d5db; border-radius: 20px; }\n.input-37:checked { background: #3b82f6; }

.input-38 { border-bottom: 2px solid #3b82f6; }\n.input-38:focus { border-image: url('data:image/svg+xml,...') 1; }

.input-39::placeholder { transform: scale(0.8); transition: transform 0.3s; }\n.input-39:focus::placeholder { transform: scale(1); }

.input-40:focus { animation: bounce 0.5s; }\n@keyframes bounce { 50% { transform: translateY(-5px); } }

.input-41:focus { clip-path: circle(100% at center); transition: clip-path 0.3s; }

.input-42:focus { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); }

.input-43:focus { animation: echo 0.5s; }\n@keyframes echo { 50% { opacity: 0.5; } }

.input-container-44 label { transform: rotateX(90deg); transition: transform 0.3s; }\n.input-44:focus + label { transform: rotateX(0); }

.input-45 { border: 2px solid; border-image: linear-gradient(45deg, #ef4444, #3b82f6) 1; }

.input-46:focus { box-shadow: 0 0 15px #facc15, inset 0 0 5px #facc15; }

.input-47:focus { box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); }

.input-48:focus { outline: 2px dashed #ef4444; outline-offset: 2px; }

.input-49:focus { background: radial-gradient(circle, #ef4444, #3b82f6, #facc15); color: #fff; }

.input-50:focus { background: url('data:image/svg+xml,...') center/cover; color: #fff; }