<div class="radikalwp-cb-chips"><label class="radikalwp-cb-chip"><input type="checkbox" checked><span>رایگان<//span><//label><label class="radikalwp-cb-chip"><input type="checkbox"><span>پریمیوم<//span><//label><label class="radikalwp-cb-chip"><input type="checkbox"><span>جدید<//span><//label><//div>
.radikalwp-cb-chips { display: inline-flex; gap: 8px; font-family: inherit; }
.radikalwp-cb-chip input { display: none; }
.radikalwp-cb-chip span {
display: inline-block;
padding: 7px 18px;
font-size: 13px;
font-weight: 600;
color: #64748b;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 999px;
cursor: pointer;
transition: all .25s ease;
}
.radikalwp-cb-chip span:hover { border-color: #94a3b8; }
.radikalwp-cb-chip input:checked + span {
color: #fff;
background: #4f46e5;
border-color: #4f46e5;
box-shadow: 0 4px 12px rgba(79, 70, 229, .3);
}
درباره این اسنیپت
چکباکسی که خودش به شکل چیپ است و با تیک، پسزمینه و حاشیه رنگی میگیرد؛ برای فیلترهای فروشگاه. این کنترل انتخاب، جایگزین زیبای چکباکس پیشفرض مرورگر است و بدون جاوااسکریپت کار میکند. برای تغییر حس بصری کافی است متغیرهای رنگ بالای کد را عوض کنید؛ بقیه چیدمان دستنخورده میماند. همه کلاسها با پیشوند radikalwp شروع میشوند تا با استایلهای قالب شما تداخلی پیش نیاید و راحتتر شخصیسازی شوند.
پرسشهای متداول
بله. کلاسها با پیشوند radikalwp ایزوله شدهاند تا با استایل قالب شما تداخل نکنند؛ کافی است کد را داخل ویجت HTML المنتور بگذارید. برای شخصیسازی رنگها هم کافی است مقادیر hex در CSS را عوض کنید.
در CSS این کد، مقادیر رنگ (hex یا rgb) را پیدا کنید و با کد رنگ برند خود جایگزین کنید. چیدمان و انیمیشنها دستنخورده میمانند و فقط ظاهر رنگی تغییر میکند.
کافی است کد HTML و CSS این کنترل انتخاب را کپی کنید و در فایل پروژه یا ویجت HTML المنتور جایگذاری کنید. هیچ نصب یا وابستگی اضافهای لازم نیست و همهچیز با CSS خالص کار میکند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۱ از ۱۰ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!