illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6336 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

33 33247 ۲۴ اردیبهشت ۹۳
1 2 3

به نام خدا

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

همونطور که میدونید همیشه کنار عناصر فرم( چک باکس، دکمه رادیو، فیلدها و ...) یک تگ <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 سبز بشه.

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

1 2 3
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 33 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

    • ‏‏
      علی امینی(۱ شهریور ۱۳۹۳)

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

  • ‏‏

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

    • ‏‏
      علی امینی(۱ شهریور ۱۳۹۳)

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

  • ‏‏

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

  • ‏‏

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

  • ‏‏

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

  • ‏‏

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

  • ‏‏
    هیوا هیوایی(۲۲ بهمن ۱۳۹۴)

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

    ممنون

  • ‏‏

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram