الصنف :checked
< CSS
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
الصنف الزائف :checked
في CSS (أي pseudo-class) يُمثِّل أيّة أزرار انتقاء (radio button) أو صناديق تأشير (checkbox) أو خيارات <option>
في عنصر <select>
تم تحديدها أو انتقاؤها. يمكن أن يُفعِّل المستخدم هذه الحالة بتفعيل أو انتقاء العنصر.
:checked {
margin-left: 25px;
border: 1px solid blue;
}
ملاحظة: أغلبية المتصفحات تعامل عناصر <option>
كعناصر مُستبدَلة (replaced elements)، ومدى تطبيقها للأنماط المرتبطة بالصنف الزائف :checked
يختلف من متصفحٍ لآخر.
الشكل العام لهذا المحدد:
:checked
أمثلة
لاحظ طريقة تنسيق أزرار الانتقاء (radio buttons) وصناديق التأشير (checkboxes) وخيارات <option>
عند تفعيلها:
<div>
<input type="radio" name="my-input" id="yes">
<label for="yes">نعم</label>
<input type="radio" name="my-input" id="no">
<label for="no">لا</label>
</div>
<div>
<input type="checkbox" name="my-checkbox" id="opt-in">
<label for="opt-in">تحقق مني!</label>
</div>
<select name="my-select" id="fruit">
<option value="opt1">تفاح</option>
<option value="opt2">عنب</option>
<option value="opt3">إجاص</option>
</select>
شيفرة CSS:
div,
select {
margin: 8px;
}
input:checked + label {
color: red;
}
input[type="radio"]:checked {
box-shadow: 0 0 0 3px orange;
}
input[type="checkbox"]:checked {
box-shadow: 0 0 0 3px hotpink;
}
option:checked {
box-shadow: 0 0 0 3px lime;
color: red;
}
مثال آخر يبيّن كيفية استخدام الصنف الزائف :checked
للسماح للمستخدم بإظهار (أو إخفاء) محتوى معيّن حسب حالة صندوق التأشير (checkbox)، وذلك دون استخدام JavaScript:
<input type="checkbox" id="expand-toggle" />
<table>
<thead>
<tr><th>عمود #1</th><th>عمود #2</th><th>عمود #3</th></tr>
</thead>
<tbody>
<tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
<tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
<tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
<tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
<tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
</tbody>
</table>
<label for="expand-toggle" id="expand-btn">تبديل الأسطر المخفية</label>
شيفرة CSS:
/* إخفاء صندوق التأشير */
#expand-toggle {
display: none;
}
/* إخفاء المحتوى افتراضيًا */
.expandable {
visibility: collapse;
background: #ddd;
}
/* تنسيق الزر */
#expand-btn {
display: inline-block;
margin-top: 12px;
padding: 5px 11px;
background-color: #ff7;
border: 1px solid;
border-radius: 3px;
}
/* إظهار المحتوى عند تفعيل صندوق التأشير */
#expand-toggle:checked ~ * .expandable {
visibility: visible;
}
/* تنسيق الزر عند تفعيل صندوق التأشير */
#expand-toggle:checked ~ #expand-btn {
background-color: #ccc;
}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 1.0 | 1.0 | 9.0 | 9.0 | 3.1 |
انظر أيضًا
- صفحة الصنف الزائف
default:
الذي يُمثِّل أي عنصر مُختار افتراضيًا بين مجموعة من العناصر المتعلقة به. - صفحة الصنف الزائف
disabled:
الذي يُمثِّل أي عنصر مُعطَّل.
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.
- مسودة Selectors Level 4.
- مواصفة CSS Basic User Interface Module Level 3.
- مواصفة Selectors Level 3.