<label class="radikalwp-cb-bulb"><input type="checkbox" checked><span class="radikalwp-cb-bulb-box"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.4 1 2.3h6c0-.9.4-1.8 1-2.3A7 7 0 0 0 12 2z"/><//svg><//span><//label>
.radikalwp-cb-bulb { display: inline-flex; cursor: pointer; }
.radikalwp-cb-bulb input { display: none; }
.radikalwp-cb-bulb-box {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
color: #64748b;
background: #fff;
border: 2px solid #e2e8f0;
border-radius: 14px;
transition: all .3s ease;
}
.radikalwp-cb-bulb-box svg { width: 26px; height: 26px; transition: color .3s ease; }
.radikalwp-cb-bulb input:checked + .radikalwp-cb-bulb-box {
border-color: #fbbf24;
box-shadow: 0 0 0 4px rgba(251, 191, 36, .18), 0 0 22px rgba(251, 191, 36, .5);
}
.radikalwp-cb-bulb input:checked + .radikalwp-cb-bulb-box svg { color: #f59e0b; }
درباره این اسنیپت
چکباکسی که هنگام تیک، مثل روشن شدن چراغ هاله نور زرد دورش ظاهر میشود؛ تفریحی و آموزنده. این کنترل انتخاب، جایگزین زیبای چکباکس پیشفرض مرورگر است و بدون جاوااسکریپت کار میکند. رنگها و اندازهها با متغیرهای ساده CSS قابل تغییرند و میتوانید آنها را با پالت برند خودتان هماهنگ کنید. پشتیبانی کامل راستچین (RTL) دارد و در حالت تیره سایت نیز ظاهر مناسبی خواهد داشت.
پرسشهای متداول
کافی است کد HTML و CSS این کنترل انتخاب را کپی کنید و در فایل پروژه یا ویجت HTML المنتور جایگذاری کنید. هیچ نصب یا وابستگی اضافهای لازم نیست و همهچیز با CSS خالص کار میکند.
بله. کلاسها با پیشوند radikalwp ایزوله شدهاند تا با استایل قالب شما تداخل نکنند؛ کافی است کد را داخل ویجت HTML المنتور بگذارید. برای شخصیسازی رنگها هم کافی است مقادیر hex در CSS را عوض کنید.
در CSS این کد، مقادیر رنگ (hex یا rgb) را پیدا کنید و با کد رنگ برند خود جایگزین کنید. چیدمان و انیمیشنها دستنخورده میمانند و فقط ظاهر رنگی تغییر میکند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۱۶ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!