Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

آموزش سریع: دادن استایل به چک باکس ها و دکمه های رادیویی

by
Length:LongLanguages:

Persian (پارسی) translation by Asadollah Irani (you can also view the original English article)

تا به حال کنجکاو شده اید که چگونه می توان به چکباکس ها و دکمه های رادیوی بدون استفاده از جاوااسکریپت استایل دهی کرد؟ با کمک CSS3 شما می توانید اینکار را انجام دهید! در این آموزش می خواهیم با کمک CSS3 اینکار را انجام دهیم:

اگر شما به دنبال زیبا کردن المان های فرم هایتان هستید می توانید به بسته های رابط کاربری موجود در Envato  نگاهی بیاندازید. در غیر اینصورت یک فنجان قهوه بردارید و این آموزش را شروع کنید!

1. درک فرآیند

قبل از شروع توصیه می کنم این آموزش را مطالعه نمایید: 30 گزینش‌گر CSS که باید به خاطر بسپارید

برای آن دسته از کسانی که به توانایی های CSS خود ایمان دارند، کد زیر مهمترین کدهای CSS این آموزش می باشد.

حالا برای آن دسته از کسانی که نیاز به راهنمایی بیشتری دارند می توانند ادامه مقاله را مطالعه نمایند.

بسیار خب، برگردیم سر موضوع. دقیقاً چه کار می خواهیم بکنیم؟ با استفاده از شبه کلاس checked: ما می توانیم عناصری از صفحه را با استفاده از وضعیت checked و یا unchecked بودن آن عنصر، انتخاب کنیم. سپس می توانید از + استفاده کنید تا عناصر خواهر و برادر مجاور که دقیقاً بعد checkbox و یا radio قرار گرفته اند را انتخاب کنید، که در این جا label را می خواهیم انتخاب کنیم.

2. راه اندازی HTML

حالا ما با ایجاد فایل های HTML و CSS کار را شروع می کنیم (یا هر روشی که شما ترجیح می دهید که با فایل های استایل خود کار کنید). من فرض می کنم شما نحوه انجام این کار را بلدید بنابراین وارد این موضوع نخواهیم شد.

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

خب بیایید که واقعاً کار رو شروع کنیم. ما کارمان رو با ایجاد تگ input برای چک باکس و سپس به دنبال آن قرار دادن یک label، شروع می کنیم.

در اینجا نیازی به دانستن در مورد <label> نمی باشد و تنها باید بین تگ label و چک باکس ارتباط برقرار کنید تا بتوانید با استفاده از این تگ با چک باکس تعامل داشته باشید. این کار را می توانید با استفاده از ""=for و ID تگ چکباکس انجام دهید.

همچنین من ترجیح می دهم که یک تگ <span> داخل label اضافه کنم که در مرحله سه علت این کار را برای شما بیشتر توضیح خواهم داد.

3. اصل ماجرا: CSS

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

حالا که چکباکس اصلی مخفی شده است، می توانیم label را استایل دهی کنیم ولی به طور خاص span موجود در داخل label را استایل دهی می کنیم. این کار را به این دلیل انجام می دهم که به من کنترل بیشتری برای موقعیت دقیق چکباکس می دهد. بدون این کار، شما احتمالاً از یک تصویر زمینه به صورت مستقیم در label استفاده خواهید کرد که تعیین موقعیت آن اندکی دشوار می باشد.

بسیار خب، اجازه دهید تا توضیحی درباره تکه کد بالا به شما بدهم. اول از همه به بک گراند توجه کنید. در اینجا من یک صفحه sprite کوچک دارم، که تنها کاری که باید بکنم این است که مقدار خصیصه position را برای بک گراند تگ span تنظیم کنم. تگ span، طول و عرض مشخصی دارد که کار ما را ساده تر می کند.

Our sprite sheet
صفحه sprite ما

این هم باقی کد CSS ویژه استایل دهی می باشد.

4. راه اندازی

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

توجه داشته باشید به این دلیل که من از صفحه sprite استفاده کرده ام تنها کاری که باید انجام دهم این است که موقعیت بکگراند را تغییر دهم. همچنین دقت کنید که من باید استایل را زمانی به span موجود در label اعمال کنم که شما بروی چکباکس و یا دکمه رادیویی کلیک کرده باشید و تیک آن خورده باشد و برای این کار از گزینش‌گر کاذب checked: استفاده کرده ام.

مرورگرهایی که از این ویژگی پشتیبانی می کنند

گزینش‌گرهای کاذب به صورت گسترده در اکثر مرورگرها پشتیبانی می شود اما هشدارهای معمولی داده می شود و احتمال ایجاد خطا وجود دارد.

Can I use data for pseudo selectors
اطلاعات Can I Use برای گزینش‌گرهای کاذب عمومی
IE9 on Windows 7
نتیجه کار: اینترنت اکسپلورر 9 در ویندوز 7

پشتیبانی از checked: در مرورگر موبایل های قدیمی مشخص نمی باشد و دارای مشکل می باشد به عنوان مثال سافاری در iOS نسخه 6 از این ویژگی پشتیبانی نمی کند.

نتیجه گیری

خب دیگر تمام است. بگزارید یک بار دیگر کد HTML مان را برسی نماییم.

کد شما هم مطابق کد بالا می باشد؟ فراموش نکنید که تگ <span> را اضافه کنید! زمانی که دارید این آموزش را خودتان انجام می دهید شدیداً توصیه میکنم که روش های جدید و یا متفاوتی را برای انجام دادن این بخش پیدا کنید. من مشتاقم ببینم که شما چه کار می کنید که بهینه تر باشد. حالا برای CSS:

همه چیز درسته؟ به یاد داشته باشید که تمام طراحی های من برای استایل دادن به فایل های آزمایشی بوده است. من شما را تشویق می کنم که یک نسخه برای خودتان ایجاد نمایید و با قرار دادن و مشاهده تجربه به دست بیاورید.

در نتیجه مهمترین بخش این آموزش همان چند خط کد CSS می باشد که من در اوایل این آموزش برای شما نوشتم.

با استفاده از این ویژگی شما می توانید چیزهای متفاوتی ایجاد کنید. با امکانات checked: می توانید از استایل دهی به چکباکس ها و دکمه های رادیویی فراتر بروید ولی من شما را با امتحان به روش خودتان تنها می گذارم. بعضی چیزها برای امتحان کردن با:

  • اضافه کردن 2x spritesheet برای صفحه نمایش های رتینا
  • استفاده از SVG به جای bitmap

امیدوارم که از این مقاله کوتاه لذت برده باشید و امیدوارم که مواردی که در این آموزش مشهاده کردید را توسعه و بهبود بدهید.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.