चेकबॉक्स के लिए उन्नत सीएसएस स्टाइलिंग

सीएसएस का उपयोग करके चेकबॉक्स को स्टाइल करने के लिए कई समाधान ऑनलाइन मौजूद हैं। हालाँकि, यदि आप अधिक लचीलापन और अलग-अलग चेकबॉक्स पर अलग-अलग रंग लागू करने की क्षमता चाहते हैं, तो निम्नलिखित दृष्टिकोण पर विचार करें:

आवश्यकता:
कई छवियां बनाए बिना विभिन्न रंगों के साथ चेकबॉक्स को अनुकूलित करें।

समाधान:
एक सफेद बाहरी और आंशिक रूप से पारदर्शी चेकबॉक्स के साथ एक पारदर्शी पीएनजी छवि का उपयोग करें। HTML तत्व पर CSS-निर्दिष्ट पृष्ठभूमि रंग लागू करें, जिसके परिणामस्वरूप चेकबॉक्स पर एक रंग ओवरले होगा।

कोड:
जावास्क्रिप्ट:

// 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 {
  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 /