<div class="radikalwp-cb-perms"><label class="radikalwp-cb-perm"><input type="checkbox" checked><span class="radikalwp-cb-perm-box"><//span>مشاهده آمار<//label><label class="radikalwp-cb-perm"><input type="checkbox" checked><span class="radikalwp-cb-perm-box"><//span>مدیریت محتوا<//label><label class="radikalwp-cb-perm"><input type="checkbox"><span class="radikalwp-cb-perm-box"><//span>مدیریت کاربران<//label><label class="radikalwp-cb-perm"><input type="checkbox"><span class="radikalwp-cb-perm-box"><//span>تنظیمات پرداخت<//label><//div>
.radikalwp-cb-perms { display: inline-flex; flex-direction: column; gap: 10px; font-family: inherit; }
.radikalwp-cb-perm {
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
color: #334155;
cursor: pointer;
}
.radikalwp-cb-perm input { display: none; }
.radikalwp-cb-perm-box {
width: 20px;
height: 20px;
border: 2px solid #cbd5e1;
border-radius: 5px;
position: relative;
transition: all .25s ease;
flex-shrink: 0;
}
.radikalwp-cb-perm-box::after {
content: '\2713';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #fff;
opacity: 0;
transform: scale(.3);
transition: all .2s ease;
}
.radikalwp-cb-perm input:checked + .radikalwp-cb-perm-box { background: #0d9488; border-color: #0d9488; }
.radikalwp-cb-perm input:checked + .radikalwp-cb-perm-box::after { opacity: 1; transform: scale(1); }
درباره این اسنیپت
گروه چکباکس دسترسیها با ظاهر یکدست و فاصله منظم؛ برای فرم نقشها و سطوح دسترسی. این کنترل انتخاب، جایگزین زیبای چکباکس پیشفرض مرورگر است و بدون جاوااسکریپت کار میکند. همه کلاسها با پیشوند radikalwp شروع میشوند تا با استایلهای قالب شما تداخلی پیش نیاید و راحتتر شخصیسازی شوند. انیمیشنها با GPU-friendly خواص transform و opacity ساخته شدهاند تا سرعت سایت شما تحت تأثیر قرار نگیرد.
پرسشهای متداول
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۷ از ۷ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!