سوییچ توگل CSS — کلیدهای تغییر وضعیت بدون جاوااسکریپت

سوییچ‌های توگل CSS-only با چک‌باکس مخفی و سلکتور :checked کار می‌کنند — بدون حتی یک خط جاوااسکریپت. این مجموعه شامل سوییچ استایل iOS و سوییچ حالت شب/روز با آیکون خورشید و ماه است.

۹ کد آماده برای «سوییچ توگل css»

پیش‌نمایش زنده سوییچ‌ها

سوییچ ردیفی آجری

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

سوییچ گرد کلاسیک

سوییچ کلید چک‌باکس
۴۷
۴.۹ (۷)
پیش‌نمایش زنده سوییچ‌ها

سوییچ با افکت موج روشنایی

سوییچ انیمیشن روشنایی
۶۵
۴.۹ (۱۰)
روشنسیستمخاموش
پیش‌نمایش زنده سوییچ‌ها

سوییچ سه‌حالته روشن خنثی خاموش

سوییچ سه حالته خنثی
۲۰
۴.۸ (۳)
پیش‌نمایش زنده سوییچ‌ها

سوییچ سه‌حالته شیشه‌ای

سوییچ سه‌حالته خودکار
۲۰
۴.۸ (۳)
پیش‌نمایش زنده سوییچ‌ها

سوییچ خورشید و ماه

سوییچ تم تیره خورشید
۲۰
۴.۸ (۳)
پیش‌نمایش زنده سوییچ‌ها

سوییچ آیفونی نرم

سوییچ آیفونی نرم
۲۱
۴.۸ (۳)
پیش‌نمایش زنده سوییچ‌ها

سوییچ مورب مینیمال

سوییچ مینیمال
۲۲
۴.۸ (۳)
پیش‌نمایش زنده سوییچ‌ها

سوییچ نرم آبی

سوییچ کلید آبی
۴۵
۴.۷ (۷)

سوالات متداول

سوییچ CSS-only چطور بدون جاوااسکریپت کار می‌کند؟

با یک چک‌باکس مخفی و سلکتور input:checked + .slider. وضعیت چک‌باکس به‌عنوان state عمل می‌کند و CSS ظاهر را عوض می‌کند.

راهنماهای مرتبط