پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<label class="radikalwp-chk-card"><input type="checkbox" checked><span class="radikalwp-chk-card-tick"><svg viewBox="0 0 16 16" width="10" height="10" aria-hidden="true"><path d="M3 8.5L6.5 12L13 4" fill="none" stroke="#fff" stroke-width="2.8" stroke-linecap="round"/><//svg><//span><strong class="radikalwp-chk-card-title">ارسال با پست پیشتاز<//strong><span class="radikalwp-card-chk-desc">۳ تا ۵ روز کاری — ۴۵ هزار تومان<//span><//label>
.radikalwp-chk-card {
  position: relative;
  display: block;
  max-width: 260px;
  padding: 18px 20px 16px;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.radikalwp-chk-card input { position: absolute; opacity: 0; }
.radikalwp-chk-card:has(input:checked) {
  border-color: #8b5cf6;
  background: #faf5ff;
  transform: translateY(-2px);
}
.radikalwp-chk-card-tick {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #8b5cf6;
  border-radius: 50%;
  transform: scale(0);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.radikalwp-chk-card:has(input:checked) .radikalwp-chk-card-tick { transform: scale(1); }
.radikalwp-chk-card-title {
  display: block;
  font-size: 14px;
  color: #1e293b;
  margin-bottom: 4px;
}
.radikalwp-card-chk-desc {
  display: block;
  font-size: 12px;
  color: #64748b;
}

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

کارت کوچکی که کلیک روی آن انتخاب می‌شود: حاشیه بنفش می‌شود، پس‌زمینه ملایم می‌گیرد و تیک گوشه بالا ظاهر می‌گردد. برای انتخاب پلن ارسال، سطح اشتراک و گزینه‌های چندگانه تصویری/متنی ساخته شده است. به‌جای چک‌باکس کوچک سنتی، کل ناحیه هدف لمسی بزرگ است. چند کارت کنار هم، رابط انتخابی تمیزی می‌سازد.

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

به input مقدار value و name بدهید؛ چون checkbox است، در submit همه موارد انتخابی ارسال می‌شوند. برای تک‌انتخابی، inputها را radio کنید با همین ظاهر.

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

مقادیر top و left را به right تغییر دهید؛ در چیدمان RTL قرار دادن تیک سمت چپ عمدی بود تا با شروع متن راست تداخل نکند.

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

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

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

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

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

کپچا

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

شاید بپسندی

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

چک‌باکس کارتی انتخابی

چک‌باکس کارت انتخاب
۲۳
۴.۵ (۳)
پیش‌نمایش زنده اسنیپت

دکمه‌های رادیو انتخاب پلن

رادیو پلن انتخاب
۳۰
۴.۳ (۴)
پیش‌نمایش زنده اسنیپت

چک‌باکس تیک دست‌ساز

چک‌باکس تیک فرم
۲۷
۴.۶ (۴)