پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<div class="radikalwp-f-otp"><p>کد ۴ رقمی ارسال‌شده را وارد کنید<//p><div class="radikalwp-f-otp-boxes"><input type="text" maxlength="1" value="۴"><input type="text" maxlength="1" value="۲"><input type="text" maxlength="1"><input type="text" maxlength="1"><//div><//div>
.radikalwp-f-otp { font-family: inherit; text-align: center; }
.radikalwp-f-otp p { margin: 0 0 14px; font-size: 13px; color: #475569; }
.radikalwp-f-otp-boxes { display: flex; gap: 10px; justify-content: center; }
.radikalwp-f-otp-boxes input {
  width: 52px;
  height: 56px;
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  color: #1e293b;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  outline: none;
  transition: all .25s ease;
}
.radikalwp-f-otp-boxes input:focus { border-color: #4f46e5; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(79, 70, 229, .18); }

درباره این اسنیپت

چهار خانه مجزا برای کد تایید پیامکی با فوکوس رنگی؛ همان تجربه OTP اپلیکیشن‌های بانکی. این فیلد برای فرم‌های ورود، ثبت‌نام، جستجو و فیلتر طراحی شده و فوکوس و حالت‌های خطا را پوشش می‌دهد. پشتیبانی کامل راست‌چین (RTL) دارد و در حالت تیره سایت نیز ظاهر مناسبی خواهد داشت. کد کاملاً با CSS خالص نوشته شده و به هیچ کتابخانه خارجی وابسته نیست؛ کافی است آن را کپی و در پروژه خود بچسبانید.

پرسش‌های متداول

بله، اندازه‌ها با واحدهای نسبی و flex/grid ساخته شده‌اند و در نمایشگرهای کوچک هم درست نمایش داده می‌شوند. اگر عرض ثابت دیدید، می‌توانید آن را با max-width برای موبایل تنظیم کنید.

خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشن‌ها روی GPU اجرا می‌شوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.

بله، این کد به‌صورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه می‌شود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۰ از ۶ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

پیش‌نمایش زنده اسنیپت

ورودی کد یکبار مصرف

فرم کد یکبار مصرف OTP
۱۰۰
۴.۲ (۱۶)
پیش‌نمایش زنده اسنیپت

جعبه کد یکبار مصرف

فرم OTP کد
۶۰
۴.۱ (۹)
پیش‌نمایش زنده اسنیپت

اینپوت خط زیر متحرک

فرم اینپوت خط
۱۰۰
۴.۲ (۱۶)