آموزش استایل دهی به چک باکس ها (checkbox)

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

برای خواندن آموزش به ادامه ی مطلب بروید.

ما بطور مستقیم نمی توانیم به چک باکس استایل دهیم ولی یک راه در پیش رو داریم :

می توانیم عنصر چک باکس را ناپدید کنیم و به جای آن عنصری دیگر را جایگزین کنیم.که این عنصر جدید ما همان عنصر label است. تگ label یک تگ دو تایی است که می توانید آن را به یک چک باکس (یا عنصر فرم دیگر) نسبت دهبم و استایل های دلخواه را به آن اعمال کنیم.

به تکه کد زیر دقت کنید تا نحوه ی کار را بفهمید:خرید کاپ ورزشی

 <input type="checkbox" id="test">

 <label for="test"></label>

ذر خط اول ما یک عنصر چک باکس ساده ایجاد کردیم و به آن id با مقدار test را اضافه می کنیم. ما با استفاده از idها می توانیم در یک صفحه عناصر را شناسایی کنیم. در حقیقت idها مانند پلاک خانه ها هستند که خانه ها را از هم متمایز می کنند. تگ label هم از همین id برای شناسایی چک باکس مورد نظر استفاده می کنند.

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

تا اینجا ما توانستیم تگ labelای ایجاد کنیم و آن را به چک باکسمان نسبت دهبم.

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

به استایل های زیر دقت کنید:

 

 .checkbox

 {

       display : none;

 }

 label

 {

       width : 150px;

       height : 50px;

       background : white;

 }

 input[type="checkbox"]:checked + label

 {

       width : 150px;

       height : 50px;

       background : blue;

 }

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

کلاس دوم ما مربوط به تگ label است که استایل آن را در حالت غیر فعال نشان می دهد.

و اما کلاس سوم . برای اینکه از کلاس سوم درک بهتری داشته باشید به این جمله دقت کنید ( در صورتی که عنصر فرم از نوع چک باکس فعال شد به تگ label ای که دقیقا بعد از آن قرار دارد این استایل ها را بده ) ذر صورتی که دانش css شما در حدی است که این کد را بفهمید می توانید آن را تغییر دهید در غیر اینصورت با همین کد می توانید بیشتر کار های خود را انجام دهید.

خب به همین سادگی شما می توانید به این چک باکس ها استایل دهی کنید.

در اینجا چند نمونه ی آماده به کار هم برای شما آماده شده است که می توانید از آن ها استفاده کنید.

» دانلود نمونه های آماده برای استفاده