سوییچ توگل CSS — کلیدهای تغییر وضعیت بدون جاوااسکریپت
سوییچ‌های توگل CSS-only با چکباکس مخفی و سلکتور :checked کار می‌کنند — بدون حتی یک خط جاوااسکریپت. این مجموعه شامل سوییچ استایل iOS و سوییچ حالت شب/روز با آیکون خورشید و ماه است.
۹ کد آماده برای «سوییچ توگل css»
پیش‌نمایش زنده
سوییچ‌ها
سوییچ ردیفی آجری
سوییچ
آجری
متفاوت
۲۲
۴.۹ (۳)
پیش‌نمایش زنده
سوییچ‌ها
سوییچ گرد کلاسیک
سوییچ
کلید
چکباکس
۴۷
۴.۹ (۷)
روشنسیستمخاموش
سوییچ سه‌حالته روشن خنثی خاموش
سوییچ
سه حالته
خنثی
۲۰
۴.۸ (۳)
سوییچ سه‌حالته شیشه‌ای
سوییچ
سه‌حالته
خودکار
۲۰
۴.۸ (۳)
پیش‌نمایش زنده
سوییچ‌ها
سوییچ خورشید و ماه
سوییچ
تم تیره
خورشید
۲۰
۴.۸ (۳)
پیش‌نمایش زنده
سوییچ‌ها
سوییچ آیفونی نرم
سوییچ
آیفونی
نرم
۲۱
۴.۸ (۳)
پیش‌نمایش زنده
سوییچ‌ها
سوییچ نرم آبی
سوییچ
کلید
آبی
۴۵
۴.۷ (۷)
پیش‌نمایش زنده
سوییچ‌ها
سوییچ روز و شب
سوییچ
شب و روز
تم
۴۵
۴.۷ (۷)
پیش‌نمایش زنده
سوییچ‌ها
سوییچ مربعی نئون
سوییچ
نئون
مربعی
۳۷
۴.۷ (۶)
سوالات متداول
سوییچ CSS-only چطور بدون جاوااسکریپت کار میکند؟
با یک چکباکس مخفی و سلکتور input:checked + .slider. وضعیت چکباکس بهعنوان state عمل میکند و CSS ظاهر را عوض میکند.