مرجع 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.0

همچنین برای المان هایی که توسط طراح یا برنامه نویس سایت به صورت پیش فرض انتخاب شده اند.

<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.0

موارد استفاده و مثال ها

تکه کد زیر تمام گزینه های انتخاب شده را استایل دهی می کند.

: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.0

ساپورت مرورگر

checked: در مرورگرهای کروم ، فایرفاکس ، سافاری ، اپرا +9 ، اینترنت اسپلورر +9 و اندروید و آی او اس ساپورت می شود.

استفاده از این متون آموزشی و کپی برداری از آن ها بلامانع می باشد. توجه شود که ذکر منبع به شدت روحیه دهنده است 😉 .

همچنین منتظر دیدگاه های شما هستیم.