체크박스에 대한 향상된 CSS 스타일링

CSS를 사용하여 체크박스 스타일을 지정하기 위한 많은 솔루션이 온라인에 존재합니다. 그러나 더 큰 유연성과 개별 확인란에 다양한 색상을 적용하는 기능을 원한다면 다음 접근 방식을 고려하세요.

요구 사항:
많은 이미지를 만들지 않고도 다양한 색상으로 확인란을 사용자 정의하세요.

해결책:
외관이 흰색이고 부분적으로 투명한 체크박스가 있는 투명한 PNG 이미지를 활용하세요. HTML 요소에 CSS 지정 배경색을 적용하면 확인란에 색상 오버레이가 표시됩니다.

코드:
JavaScript:

// 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/, "");
}

CSS:

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

추가 CSS
다양한 색상 클래스를 정의하고 배경 색상과 연결합니다.

HTML:

이 방법은 PNG를 가정하고 PNG 투명도를 활용하여 원하는 효과를 얻습니다. 지원하다. 필요한 경우 GIF 마스크와 오버레이된 CSS 레이어를 사용하는 등의 대체 방법을 사용할 수 있습니다.

예(jQuery):
https://jsfiddle.net/jtbowden/xP2Ns /