9 استایل زیبا برای CheckBox با CSS3

- visibility ۳۳ mode_comment

به نام خدا

با سلام خدمت همگی دوستان سون لرنی عزیز. امیدوارم حالتون خوب باشه. همونطور که میدونید چک باکس از جمله عنصر هاییه که نمیشه مستقیماً بهشون استایل خاصی رو داد و هر مرورگر برای این چنین عناصر یه استایل خاصی به صورت پیشفرض تعریف کرده. خب حالا اگه بخوایم به این چنین عناصر استایل بدیم باید چیکار کنیم؟!

همونطور که میدونید همیشه کنار عناصر فرم( چک باکس، دکمه رادیو، فیلدها و ...) یک تگ <label> قرار میدن که یه خاصیت به نام for میگیره که مقدار این خاصیت، آیدی یکی از عناصر فرم هست. خب کار این <label> چیه؟ جواب: وقتی روی این تگ کلیک بشه، عنصری رو که بهش اشاره داره یا به صورت فوکوس در میاره و یا به صورت Checked.

خب یعنی اگه یک تگ <label> داشته باشیم و به خاصیت forش، آیدیه یک چک باکس رو بدیم، وقتی روی <label> کلیک بشه چک باکس به صورت Checked و یا unChecked در میاد.

خب حالا ما میخوایم برای استایل دادن به چک باکس از چه روشی استفاده کنیم؟ جواب: حالا که نمیتونیم به چک باکس به صورت مستقیم استایل بدیم، اون رو پنهان میکنیم. و با استفاده از تگ <label> به اون استایل میدیم. میتونید دموی کارو ببینید و دانلودش کنید.

خب توضیحات دیگه کافیه، حالا بریم سراغ کار اصلی مون، یعنی کدنویسی. فقط یه چیزی: زیاد توضیح نمیدم، لطفا کدهارو از خط اول تا آخر نگاه کنید تا کاملا در روند کار قرار بگیرید؛ فقط  نکات رو تذکر میدم 🙂 ؛ اگه سوالی بود بپرسید. ابتدا کدهای CSS اصلی رو میذارم.

CSS:

همونطور که دیدید تمام چک باکس هارو پنهان کردیم.

1. Slide One

HTML:

CSS:

همونطور که ملاحظه فرمودید به چک باکس استایل دادیم. فقط نکته ی مهم در خط 50 یعنی سلکتور + هست. اگه نمیدونید که این سلکتور چیکار میکنه باید به اینجا مراجعه کنید. خب در خط 50 گفتیم وقتی که چک باسکمون به صورت checked در اومد(یعنی وقتی روی label کلیک شد)، lable (همون دایره سفیده) به سمت راست بره. در این صورت اگه یک بار به صورت checked درش بیاریم و دوباره روی Label کلیک کنیم، دایره سفید(Lable) به سمت چپ میره! چون از حالت Checked در اومده!

کلا استایل دادن به چک باکس بر این اساسه.

2. Slide TWO

HTML:

CSS:

در این قسمت هم مهم ترین خطوط، خط 87 و 91 هست. در خط 91 گفتیم که وقتی چک باکسمون چک شد، رنگ بکگراند دایره ی داخل Lable یا همون Label::after سبز بشه.

حس میکنم صفحه یه مقدار بلند شد، لطفا به صفحه بعدی برید.

comment دیدگاه کاربران
آرمین

سلام میشه بگید :after برای چیه ؟ ممنون ❓

علی امینی

:before و :after شبه عناصری هستند که میشه توسط CSS اونهارو ایجاد کرد. مثل هر عنصر دیگه ای عمل میکنه. میشه از این شبه عناصر برای تگ هایی که باز و بسته میشن استفاده کرد. برای اطلاعات بیشتر میتونید به اینجا مراجعه کنید.

آرمین

ممنون یه سوال دیگه هم دارم عبارت -ms- یعنی چی ؟
اگه بخوام طرح های دیگه ای به غیر از تیک قرار بدم باید چی کار کنم ممنون . 🙂

علی امینی

بعضی از مرورگر ها(بیشتر نسخه های قدیمی) خاصیت های CSS3 رو تنها به همراه پیشوند خودشون پشتیبانی میکنند. یعنی شاید box-shadow رو پشتیبانی نکنه ولی اگه به همراه پیشوندش استفاده کنی پشتیبانی میکنه. مثلا -webkit-box-shadow
برای مرورگر کروم و سافاری از پیشوند -webkit-، فایرفاکس از -moz-، اپرا از -o-، و IE از -ms- استفاده میشه. اولا که باید با CSS کاملا اشنا باشی؛ بعدش هم هرطرحی که خواستی رو میتونی با دانسته هات ایجاد کنی…

آرمین

ببخشید این checkbox ها یه مشکلی دارن اگه دو checkbox معمولی رو کنار هم بزاری تو یه خط نمایش داده میشن ولی این ها بصورت block هستند اگه بخوام کنار هم باشن باید چی کار کنم ؟ 🙁

علی امینی

display اونهارو برابر inline-block قرار بده.

مهدی

سلام معنی این پروپرتی چی هست؟
-webkit-font-smoothing: antialiased;

لقمان آوند

این مقاله رو بخونید و مثال ها رو ببینید .
برای نرم تر کردن نمایش فونت ها استفاده میشه .

فاطمه زلقی

farzaneh

سلام اگه بخوام به جای input از یه کنترل asp استفاده کنم باید به جای خط87و91 چی بنویسم
ممنون از مطلب خوبتون

علی امینی

سلام دوست عزیز
بنده تا حالا با asp کار نکردم.

amin

سلام اول تشکر کنم.
میخواستم بدونم چرا onchange روی هیچکدام از چکباکس ها کار نمیکنه؟

هیوا هیوایی

با سلام وخسته نباشید
میشه تو تگ lableیه متن بنویسید و تغییرات تو کد رو هم اعمال کنید مثلا تو چک باکس آخری

ممنون

محمد

لطفا برای رادیو باکس هم قرار دهید خیلی نیاز دارم می خوام دو لیبل قرار بدم وقتی مثلا جنسیت انتخاب شد رنگ زمینه اون جنسیت تغییر کنه و با همون جنسیت ثبت بشه

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2