پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<label class="radikalwp-form-consent"><input class="radikalwp-form-consent-check" type="checkbox"><span class="radikalwp-form-consent-box"><svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path d="M2 8.5L6 12.5L14 3.5" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/><//svg><//span><span class="radikalwp-form-consent-text"><strong>قوانین و مقررات<//strong> رادیکال‌دبلیوپی را خواندم و می‌پذیرم.<//span><//label>
.radikalwp-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 360px;
  padding: 16px 18px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.radikalwp-form-consent:has(.radikalwp-form-consent-check:checked) {
  border-color: #10b981;
  background: #f0fdf4;
}
.radikalwp-form-consent-check { position: absolute; opacity: 0; }
.radikalwp-form-consent-box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid #cbd5e1;
  border-radius: 7px;
  transition: background .2s ease, border-color .2s ease;
}
.radikalwp-form-consent-box svg {
  opacity: 0;
  transform: scale(.4);
  transition: all .2s ease;
}
.radikalwp-form-consent-check:checked + .radikalwp-form-consent-box {
  background: #10b981;
  border-color: #10b981;
}
.radikalwp-form-consent-check:checked + .radikalwp-form-consent-box svg {
  opacity: 1;
  transform: scale(1);
}
.radikalwp-form-consent-text {
  font-size: 13px;
  line-height: 1.9;
  color: #475569;
}
.radikalwp-form-consent-text strong { color: #1e293b; }

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

کارت کوچک تأیید با چک‌باکس سفارشی بزرگ، متن رضایت و لینک قوانین که در پایان فرم‌های ثبت‌نام و خرید قرار می‌گیرد. چک‌باکس سفارشی با انیمیشن تیک کشویی ساخته شده و کلیک روی کل کارت، چک‌باکس را تغییر می‌دهد. برای «قوانین را می‌پذیرم» و هر تعهد الزامی مناسب است. حالت checked رنگ و حاشیه کارت را هم سبز می‌کند.

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

در مرورگرهای مدرن بله. اگر پشتیبانی مهم است، همان سبز شدن کارت را با یک کلاس از طریق JS هم می‌توانید اضافه کنید؛ تیک چک‌باکس خودش در همه‌جا کار می‌کند.

چک‌باکس اصلی با opacity صفر جای خودش هست تا کیبورد و اسکرین‌ریدر به آن دسترسی داشته باشند و ظاهر فقط با span سفارشی رسم می‌شود؛ دسترس‌پذیری حفظ می‌شود.

ویژگی required را به input اضافه کنید تا مرورگر قبل از ارسال فرم اجباری‌اش کند؛ متن خطای بومی نمایش داده می‌شود.

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

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

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

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

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

کپچا

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

شاید بپسندی

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

چک‌باکس شرایط چسبیده

فرم چک‌باکس قوانین
۳۰
۴.۳ (۴)
✓
پیش‌نمایش زنده اسنیپت

اینپوت موفقیت سبز

فرم موفقیت تأیید
۲۲
۴.۹ (۳)
پیش‌نمایش زنده اسنیپت

چک‌باکس گرد با تیک متحرک

چک‌باکس تیک متحرک
۸۰
۴.۵ (۱۲)