تصميم CSS محسّن لمربعات الاختيار

توجد العديد من الحلول عبر الإنترنت لتصميم مربعات الاختيار باستخدام CSS. ومع ذلك، إذا كنت ترغب في قدر أكبر من المرونة والقدرة على تطبيق ألوان مختلفة على مربعات الاختيار الفردية، ففكر في الطريقة التالية:

المتطلبات:تخصيص مربعات الاختيار بألوان مختلفة دون إنشاء العديد من الصور.

الحل: استخدم صورة PNG شفافة ذات مظهر خارجي أبيض ومربع اختيار شفاف جزئيًا. قم بتطبيق لون خلفية محدد بواسطة CSS على عنصر HTML، مما يؤدي إلى تراكب الألوان في مربع الاختيار.

JavaScript:
// حدد مربع الاختيار وقم بتطبيق فئات CSS if (inputs[a].type == "checkbox" || inputs[a].type == "radio" && inputs[a].className.search(/^styled/) != -1) { span[a] = document.createElement("span"); span[a].className = inputs[a].type inputs[a].className.replace(/^styled/, "");

// Check for checkbox and apply CSS classes
if (inputs[a].type == "checkbox" || inputs[a].type == "radio" && inputs[a].className.search(/^styled/) != -1) {
  span[a] = document.createElement("span");
  span[a].className = inputs[a].type   inputs[a].className.replace(/^styled/, "");
}

.checkbox, .radio { العرض: 19 بكسل؛ الارتفاع: 25 بكسل؛ الحشو: 0 بكسل؛ الخلفية: url(checkbox2.png) بدون تكرار؛ عرض: كتلة؛ واضح: يسار؛ تعويم: يسار؛

.checkbox, .radio {
  width: 19px;
  height: 25px;
  padding: 0px;
  background: url(checkbox2.png) no-repeat;
  display: block;
  clear: left;
  float: left;
}

تحديد فئات ألوان مختلفة وربطها بألوان الخلفية.
HTML:

مثال (jQuery):

https://jsfiddle.net/jtbowden/xP2Ns /