عند إنشاء أنماط CSS لنماذج HTML ، غالبًا ما يواجه المطورون عدم القدرة على تغيير مظهر مربعات الاختيار وأزرار الاختيار مباشرةً. دعونا نرى كيفية تجاوز هذا القيد باستخدام أدوات CSS3 وبدون استخدام أي رمز JavaScript.لذا ، بالنسبة للمبتدئين ، أضف بعض مربعات الاختيار العادية والتبديل إلى النموذج:/* */
<div>
<input type="checkbox" id="cb1"> <label for="cb1"> 1</label>
</div>
<div>
<input type="checkbox" id="cb2"> <label for="cb2"> 2</label>
</div>
<div>
<input type="checkbox" id="cb3"> <label for="cb3"> 3</label>
</div>
/* */
<div>
<input type="radio" name="rb" id="rb1" checked> <label for="rb1"> 1</label>
</div>
<div>
<input type="radio" name="rb" id="rb2"> <label for="rb2"> 2</label>
</div>
<div>
<input type="radio" name="rb" id="rb3"> <label for="rb3"> 3</label>
</div>
انقل العرض القياسي للعناصر خارج النطاق وأضف المسافات البادئة إلى التسميات المجاورة:input[type="checkbox"]:checked,
input[type="checkbox"]:not(:checked),
input[type="radio"]:checked,
input[type="radio"]:not(:checked)
{
position: absolute;
left: -9999px;
}
input[type="checkbox"]:checked + label,
input[type="checkbox"]:not(:checked) + label,
input[type="radio"]:checked + label,
input[type="radio"]:not(:checked) + label {
display: inline-block;
position: relative;
padding-left: 28px;
line-height: 20px;
cursor: pointer;
}
قبل الملصقات ، أضف حاويات منمقة لعناصرنا المخصصة. بالنسبة للأعلام ، ستكون هذه مربعات ذات حواف مستديرة قليلاً للجمال ، وللمفاتيح ، مجرد دوائر صغيرة:input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:not(:checked) + label:before,
input[type="radio"]:checked + label:before,
input[type="radio"]:not(:checked) + label:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 18px;
height: 18px;
border: 1px solid #dddddd;
background-color: #ffffff;
}
input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:not(:checked) + label:before {
border-radius: 2px;
}
input[type="radio"]:checked + label:before,
input[type="radio"]:not(:checked) + label:before {
border-radius: 100%;
}
أضف الآن مؤشرات الاختيار. بالنسبة إلى الأعلام ، ستكون هذه إشارات داو ؛ بالنسبة للمفاتيح ، ستكون الدوائر الصغيرة المملوءة بالألوان أصغر من الحاوية نفسها. للحصول على تأثير أكبر ، قمنا أيضًا بتعيين رسم متحرك صغير:input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after,
input[type="radio"]:checked + label:after,
input[type="radio"]:not(:checked) + label:after {
content: "";
position: absolute;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after {
left: 3px;
top: 4px;
width: 10px;
height: 5px;
border-radius: 1px;
border-left: 4px solid #e145a3;
border-bottom: 4px solid #e145a3;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type="radio"]:checked + label:after,
input[type="radio"]:not(:checked) + label:after {
left: 5px;
top: 5px;
width: 10px;
height: 10px;
border-radius: 100%;
background-color: #e145a3;
}
لتصوير الغراب ، نقوم بتدوير مستطيل صغير ، وجهان مطليان بالألوان ، 45 درجة عكس اتجاه عقارب الساعة.لاحظ أن: قبل وبعد: تسمح لك المحددات بإضافة المحتوى مباشرة قبل وبعد محتوى الملصق نفسه. نظرًا لأن التسميات نقوم بتعيين الموضع النسبي (الموضع: نسبي) ، يمكننا تعيين الموضع المطلق السياقي لمحتوياتها.يبقى إخفاء مؤشرات التحديد عند عدم تحديد العنصر ، وبالتالي ، عرضها عند وجود العنصر في الحالة المحددة:input[type="checkbox"]:not(:checked) + label:after,
input[type="radio"]:not(:checked) + label:after {
opacity: 0;
}
input[type="checkbox"]:checked + label:after,
input[type="radio"]:checked + label:after {
opacity: 1;
}
نضيف أن الحل الموضح هنا يعمل في جميع الإصدارات الحديثة من المتصفحات Chrome و Firefox و Safari و Opera وأيضًا بدءًا من الإصدار 9 وفي Internet Explorer.يمكن تحميل تعريفات CSS الكاملة هنا .