تغییر ظاهر چک باکس با CSS

در این ترفند می خواهیم تبدیل کردن عناصر چک باکس را به عناصر گرافیکی جالب آموزش دهیم و یک دمو را قدم به قدم با هم بررسی کنیم.

فرمول اصلی

قضیه از این قرار است که ما قصد مخفی کردن عنصر input را داریم و می خواهیم استایل دلخواه را بر روی label متصل به input اعمال کنیم برای این کار به صورت زیر عمل می کنیم:

در اولین قدم html به صورت زیر نوشته می شود

<input id="toggle" type="checkbox" />
<label for="toggle" />

از آنجا که خصوصیت for در عنصر label با id عنصر input برابر است کلیک کردن بر روی عنصر label باعث فعال سازی input می شود که ما به این موضوع نیاز داریم چون در مرحله بعد input را مخفی خواهیم کرد.

input[type="checkbox"] {
  position: absolute;
  visibility: hidden;
}

شاید بپرسید چرا از ;display:none برای مخفی کردن input استفاده نمی کنیم. در جواب باید گفته شود چون ربات هایی که صفحه را بررسی می کنند عناصری که با display مخفی می شوند را در نظر نمی گیرند, همینطور دیگر با تب نمی توانیم این چک باکس را انتخاب کنیم پس ما باید از روش دیگری برای مخفی کردن عنصر input استفاده کنیم. این روش input را در جریان صفحه نگه می دارد ولی کاربر قادر به دیدنش نیست.

از این مرحله به بعد باید حالت فعال و غیر فعال چک باکس را با استفاده از عنصر label و انتخابگرها بسازیم.

input:checked + label {
  /* Fun style */
}

انتخابگر بالا به این معنی است که “زمانی که چک باکس کلیک شد عنصر label که دقیقا بعد از input قرار دارد را پیدا کن”.

تا اینجای کار را با یک مثال ساده بررسی می کنیم. بر روی مربع زیر کلیک کنید و به این توجه داشته باشید که هیچ جاوااسکریپتی در کار نیست.

 

See the Pen Fun Checkbox 1 by Mojtaba Seyedi (@seyedi) on CodePen.

 

اگر نیاز به عناصری دیگری در طراحی چک باکس دارید بهترین گزینه ها انتخابگرهای after و before هستند. در اینجا ما برای چک باکسمان از before استفاده می کنیم و در زمان فعال و غیر فعال بودن چک باکس, آن را به طرفین حرکت می دهیم. دموی زیر را بررسی کنید:

 

See the Pen Fun Checkbox 2 by Mojtaba Seyedi (@seyedi) on CodePen.

 

حال کافی است به حرکت این چک باکس transition بدهیم:

 

See the Pen Fun Checkbox 3 by Mojtaba Seyedi (@seyedi) on CodePen.

 

توجه داشته باشید این مراحل بر روی نوع radio هم قابل پیاده سازی است.

مرورگرهای قدیمی

اگر برایتان سوال پیش آمده است که آیا می توان با توجه به وجود مرورگرهای ie از این طرح ها در پروژه های دنیای واقعی استفاده کرد؟ در جواب کوتاه باید گفت بله. برای فهمیدن راه حل به مطلب css با طعم ie مراجعه کنید.

این یک پیاده سازی خیلی ساده بود قطعا شما چک باکس های فوق العاده ای می توانید بسازید با ایده های عالی پس به عنوان تمرین الان شروع به ساخت یک ایده کنید و لینک کارتان را در نظرات قرار دهید تا دیگران هم نظر بدهند و استفاده کنند. برای دیدن دموهای مختلف به لینک زیر مراجعه کنید.