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

آموزش وب ، css ، طراحی وب ،
259 بازدید
آموزش تغییر استایل radio و checkbox
آموزش تغییر حالت دادن radio input ها و checkbox input ها

خیلی ها هستند که می خواهند در صفحهات سایت خود ورودی های (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 های دلخواه خود را داشته باشید.

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

رمز تمام فایل های فشرده
رمز فایل فشرده است.