CSS를 사용하여 체크박스 스타일을 다른 색상으로 지정하는 방법은 무엇입니까?

체크박스에 대한 향상된 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:

<p><input type="checkbox" name="1">

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

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

위 내용은 CSS를 사용하여 체크박스 스타일을 다른 색상으로 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!