مرجع CSS فارسی
PSEUDO-CLASS
checked:
checked:
زمانی که کاربران در تعامل با انتخاب گزینه از خانواده های radio button ها (<“input type =”radio> ) و check box ها (<“input type =”checkbox>) هستند. شبه کلاس checked: به محض انتخاب شدن یک گزینه فعال می شود.
بنابراین checked: به محض انتخاب هر یک از (<“input type =”radio>) و (<“input type =”checkbox>) یا (<option></option> در یک <select></select>) فعال می شود.
نمونه ایی از check box و radio button
See the Pen checkbox & radio button by alishooti (@alishooti) on CodePen.
همچنین برای المان هایی که توسط طراح یا برنامه نویس سایت به صورت پیش فرض انتخاب شده اند.
<input type="radio" checked>
<input type="checkbox" checked>
<select name="options" id="list">
<option value="Something" selected>This option is selected</option>
<option value="Something-else">This one is not</option>
</select>
checked: برای المان های فوق نیز اعمال خواهد شد.
سایر نکات
گاهی اوقات المان های انتخابی در وضعیتی نا مشخص قرار می گیرند. که از طریق شبه کلاس indeterminate: قابل دسترسی و استایل دهی هستند.
اسایل دهی به المان label با استفاده از checked: قدرت تصویری خاصی برای تعامل با کاربر ایجاد خواهد کرد . در مثال زیر یک نمونه چک لیست طراحی شده که بعد از انتخاب کاربر ، روی متن خط کشیده شده و حس انجام اون کار رو ایجاد می کند.
<input type="checkbox"id="todo">
<label for="todo">Buy Milk</label>
input[type = "checkbox"]:checked + label {
text-decoration: line-through;
color: grey;
}
See the Pen to do list by alishooti (@alishooti) on CodePen.
موارد استفاده و مثال ها
تکه کد زیر تمام گزینه های انتخاب شده را استایل دهی می کند.
:checked {
color: green;
}
تکه کد زیر نحوه ی استفاده از checked: در موارد مختلف را نشان می دهد .
input[type="checkbox"]:checked {
width: 20px;
height: 20px;
}
input[type="radio"]:checked {
color: green;
}
option:checked {
background-color: blue;
color: white;
}
دموی زیر مثال هایی از کاربرد checked:: در CSS می باشد.
See the Pen :checked Examples by alishooti (@alishooti) on CodePen.
ساپورت مرورگر
checked: در مرورگرهای کروم ، فایرفاکس ، سافاری ، اپرا +9 ، اینترنت اسپلورر +9 و اندروید و آی او اس ساپورت می شود.
بیشتر بخوانید
استفاده از این متون آموزشی و کپی برداری از آن ها بلامانع می باشد. توجه شود که ذکر منبع به شدت روحیه دهنده است 😉 .
همچنین منتظر دیدگاه های شما هستیم.