آموزش تغییر استایل radio و checkbox

          حمیدرضا 
            بازدید : 1895
          یکشنبه 04 بهمن 1394
           نظرات (0)
        

خیلی ها هستند که می خواهند در صفحهات سایت خود ورودی های (input) اختصاصی داشته باشند. به این معنی که تمام مواردی که برای ورودی ها وجود دارد برای سایت آن ها به طور کاملا اختصاصی طراحی شده باشد. در این کار تغییر دادن حالت ورودی های متن ، آدرس وب ، عدد و ... کار ساده ای است و به راحتی می تواند با سی اس اس این کار را انجام داد. اما تغییر دادن دکمه های checkbox و radion کمی مشکل تر است.

تغییر radio و checkbox

امکان تغییر radio و checkbox در مرورگر ها به طور مستقیم وجود ندارد اما ما می توانیم به جای آن ها label را تغییر دهیم.

<<<code>>>

<label for="radioInput1">radio label</label>

<label for="radioInput2">radio label</label>

<br />

<label for="checkboxInput">checkbox label</label>

<<</code>>>

مشاهده ی خروجی

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

همان طور که می بینید یکی از ویژگی های label این است که وقتی روی آن کلیک می کنید مثل این می ماند که روی input مربوط به آن کلیک کرده باشید. حال ما از آنجایی که نمی توانیم input های از نوع radio و checkbox را با استفاده از سی اس اس تغییر حالت دهیم ، می خواهیم این کار را بر روی label انجام دهیم.

به کد های css توجه کنید:

<<<code>>>

input[type="radio"], input[type="checkbox"]{

display: none;

}

input[type="radio"] + label{

display: inline-block;

background: #ddd;

margin: 5px 0;

padding: 10px;

cursor: pointer;

}

input[type="radio"]:checked + label{

background: #f33;

}

input[type="checkbox"] + label{

display: inline-block;

background: #333;

margin: 5px;

padding: 10px;

cursor: pointer;

border-radius: 100%;

}

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

background: #39f;

}

<<</code>>>

مشاهده ی خروجی

قسمت قرمز رنگ به این معنی است که تمام تگ های input که مقدار type آن ها برابر radio و checkbox است انتخاب شوند و تغییر روی آن ها اعمال شود. (در اینجا تغییر ما فقط پنهان کردن است)

قسمت آبی رنگ به این معنی است که تمام تگ های label که بعد از یک تگ input با مقدار type برابر radio انتخاب شوند.

قسمت بنفش رنگ دقیقا شبیه به آبی رنگ است با این تفاوت که label های بعد از تگ inputی را انتخاب می کند که در حالت checked (انتخاب شده) هستند.

دقیقا به همین شکل برای checkbox ها هم تعریف کرده ام.

بقیه ی کد ها دیگر مربوط به طراحی است و شما می توانید به طور دلخواه آن ها را تغییر دهید تا checkbox ها و radio های دلخواه خود را داشته باشید.

اگر سوالی دارید مطرح کنید.

برچسب ها آموزش سی اس اس , css , آموزش وب , طراحی وب , تغییر استایل input , تغییر radio input , تغییر checkbox input , طراحی input اختصاصی ,

ارسال نظر برای این مطلب

عنوان	پاسخ	بازدید	توسط
پنهان کردن عناصر صفحه در php	4	2586	snakeeye
طراحی باکس دانلود	6	2792	mary567
ارزیابی رایگان سایت ها و وبلاگ ها	25	9556	grimboy
انواع قالب اختصاصی	3	2330	ghraphic-home
بهترین افزونه های AMP وردپرس	2	2739	jack7788
کد پاپ اپ دو یا چند پنجره به طور همزمان پشت صفحه	23	9914	jack7788