weschool - www w3schools com html5




CSS-كيفية تصميم تسمية أزرار محددة في الراديو (3)

أنت تستخدم محددًا شقيقًا متجاورًا ( + ) عندما لا تكون العناصر شقيقة. التسمية هي أصل المدخلات ، وليس من الأخوة.

ليس لدى CSS أية طريقة لتحديد عنصر يعتمد على العناصر التابعة لها (ولا أي شيء يتبعها).

ستحتاج إلى البحث عن جافا سكريبت لحل هذه المشكلة.

بدلاً من ذلك ، أعد ترتيب ترميزك:

<input id="foo"><label for="foo">…</label>

أريد إضافة نمط إلى التصنيف المحدد لزر الراديو:

HTML:

<div class="radio-toolbar">
 <label><input type="radio" value="all" checked>All</label>
 <label><input type="radio" value="false">Open</label>
 <label><input type="radio" value="true">Archived</label>
</div>

CSS

.radio-toolbar input[type="radio"] {display:none;}
.radio-toolbar label {
    background:Red;
    border:1px solid green;
    padding:2px 10px;
}
.radio-toolbar label + input[type="radio"]:checked { 
    background:pink !important;
}

أي أفكار ما أفعله خطأ؟


إذا كنت تريد وضع مربعات الاختيار داخل الملصق ، فحاول إضافة علامة span أخرى ، على سبيل المثال.

HTML

<div class="radio-toolbar">
 <label><input type="radio" value="all" checked><span>All</span></label>
 <label><input type="radio" value="false"><span>Open</span></label>
 <label><input type="radio" value="true"><span>Archived</span></label>
</div>

CSS

.radio-toolbar input[type="radio"]:checked ~ * { 
    background:pink !important;
}

سيؤدي ذلك إلى تعيين الخلفيات لجميع الأشقاء لزر الاختيار المحدد.


.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bbb;
}
<div class="radio-toolbar">
  <input type="radio" id="radio1" name="radios" value="all" checked>
  <label for="radio1">All</label>

  <input type="radio" id="radio2" name="radios" value="false">
  <label for="radio2">Open</label>

  <input type="radio" id="radio3" name="radios" value="true">
  <label for="radio3">Archived</label>
</div>

أولاً وقبل كل شيء ، ربما تريد إضافة سمة name على أزرار الاختيار. وإلا ، فهي ليست جزءًا من نفس المجموعة ، ويمكن التحقق من أزرار الراديو المتعددة.

أيضا ، منذ أن وضعت العلامات والأشقاء (من أزرار الراديو) ، واضطررت إلى استخدام id وخصائص لربطها معا.





css3