loading...

ابزارها قالب

آموزش تغییر حالت دادن radio input ها و checkbox input ها

تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
آخرین ارسال های انجمن
حمیدرضا بازدید : 1463 یکشنبه 04 بهمن 1394 نظرات (0)

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

تغییر radio و checkbox

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

<<<code>>>

<input type="radio" id="radioInput1" name="radio1" />

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

<input type="radio" id="radioInput2" name="radio1" />

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

<br />

<input type="checkbox" id="checkboxInput" />

<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 های دلخواه خود را داشته باشید.

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

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

نام
ایمیل (منتشر نمی‌شود)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B :S
کد امنیتی
رفرش
کد امنیتی
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
ابزارهای خاص
جعبه ی پیوند لینک کوتاه کن رایگان ارزیابی آنلاین سایت و وبلاگ به صورت رایگان
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
تبلیغات متنی
درباره ما
لوگوی ابزارها قالب
سایت ابزارها قالب برای خاص بودن آفریده شده است. به امید این که خاص ترین باشیم.
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • تبلیغات
    تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده

    آمار سایت
  • کل مطالب : 215
  • کل نظرات : 269
  • افراد آنلاین : 1
  • تعداد اعضا : 3196
  • آی پی امروز : 41
  • آی پی دیروز : 115
  • بازدید امروز : 342
  • باردید دیروز : 822
  • گوگل امروز : 3
  • گوگل دیروز : 6
  • بازدید هفته : 1,955
  • بازدید ماه : 10,452
  • بازدید سال : 101,822
  • بازدید کلی : 1,788,257
  • کدهای اختصاصی
    یادبود 175 شهید غواص
    یادبود 175 شهید غواص