پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<div class="radikalwp-slot-picker"><span class="radikalwp-slot-picker-title">ساعت مراجعه:<//span><input type="radio" id="radikalwp-slot-1" name="radikalwp-slot" checked><label for="radikalwp-slot-1">۰۹:۰۰<//label><input type="radio" id="radikalwp-slot-2" name="radikalwp-slot"><label for="radikalwp-slot-2">۱۱:۳۰<//label><input type="radio" id="radikalwp-slot-3" name="radikalwp-slot"><label for="radikalwp-slot-3">۱۴:۰۰<//label><input type="radio" id="radikalwp-slot-4" name="radikalwp-slot"><label for="radikalwp-slot-4">۱۶:۳۰<//label><//div>
.radikalwp-slot-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  width: 380px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}
.radikalwp-slot-picker-title { font-size: 12.5px; font-weight: 700; color: #334155; }
.radikalwp-slot-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.radikalwp-slot-picker label {
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  border: 1.5px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.radikalwp-slot-picker label:hover { border-color: #a5b4fc; }
.radikalwp-slot-picker input:checked + label {
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 5px 14px rgba(79, 70, 229, .35);
}

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

انتخابگر ساعت رزرو با چیپ‌های قابل کلیک که حالت انتخاب‌شده را با پس‌زمینه گرادیان برند نشان می‌دهد. چیدمان افقی و لمسی‌پسند آن برای موبایل عالی است و جای منوی کشویی را می‌گیرد. برای رزرو نوبت کلینیک، ساعت جلسه مشاوره و ثبت بازه تحویل مناسب است. با رادیو واقعی ساخته شده، پس بدون جاوااسکریپت کاملاً کار می‌کند.

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

جفت input رادیو و label را کپی کنید و id و for را یکتا نگه دارید. مقدار name باید یکسان بماند تا گروه انتخابی حفظ شود.

بله؛ انتخاب با رادیو بومی انجام می‌شود و مقدار انتخابی مثل هر رادیویی در فرم عادی ارسال می‌شود.

گرادیان کلاس input:checked + label را با رنگ برند خود جایگزین کنید. سایه رنگی هم باید هماهنگ تغییر کند تا تعادل حفظ شود.

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

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

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

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

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

کپچا

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

شاید بپسندی

گرادیان✕نئون✕
پیش‌نمایش زنده اسنیپت

فیلد جستجوی انتخاب تگ

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

دکمه اسکرول با آیکون ساعتی

دکمه رزرو زمان
۲۷
۴.۵ (۴)
پیش‌نمایش زنده اسنیپت

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

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