<div class="radikalwp-fm-otp"><input maxlength="1" value="۴" /><input maxlength="1" value="۲" /><input maxlength="1" class="radikalwp-fm-otp-on" /><input maxlength="1" /><input maxlength="1" /><input maxlength="1" /><//div>
.radikalwp-fm-otp { display: flex; gap: 9px; direction: ltr; }
.radikalwp-fm-otp input {
width: 42px;
height: 50px;
text-align: center;
font-family: inherit;
font-size: 20px;
font-weight: 700;
color: #0f172a;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
outline: none;
transition: all .2s ease;
}
.radikalwp-fm-otp input:focus {
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
transform: translateY(-2px);
}
.radikalwp-fm-otp-on { border-color: #10b981; background: #ecfdf5; color: #059669; }
درباره این اسنیپت
شش خانه جدا برای ورود کد تأیید با فوکوس رنگی؛ همان الگوی پیامک بانکها. برای OTP، تأیید دو مرحلهای و فرمهای امنیتی استاندارد است. این فیلد برای فرمهای ورود، ثبتنام، جستجو و فیلتر طراحی شده و فوکوس و حالتهای خطا را پوشش میدهد. پشتیبانی کامل راستچین (RTL) دارد و در حالت تیره سایت نیز ظاهر مناسبی خواهد داشت. کد کاملاً با CSS خالص نوشته شده و به هیچ کتابخانه خارجی وابسته نیست؛ کافی است آن را کپی و در پروژه خود بچسبانید.
پرسشهای متداول
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۱ از ۹ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!