색상 오버레이로 CSS 체크박스 스타일을 지정하는 방법은 무엇입니까?

색상 오버레이로 CSS 확인란 스타일 지정

CSS를 사용하여 확인란을 사용자 정의할 때 한 가지 과제는 색상 오버레이를 추가하여 시각적 매력을 높이는 것입니다. 서로 다른 색상의 확인란이 여러 개 필요한 경우 이는 특히 어려울 수 있습니다. 그러나 이 문제를 해결할 수 있는 효과적인 솔루션이 있습니다.

부분적으로 투명한 확인란을 사용하여 투명한 PNG 이미지를 만드는 것이 널리 사용되는 접근 방식입니다. CSS 배경색을 수정하면 원하는 색상을 확인란에 오버레이할 수 있습니다. 이 방법에는 PNG 지원이 필요하며 브라우저에서 투명성 지원이 필요합니다.

CSS, JavaScript 및 HTML을 통한 구현:

JavaScript:

// Handle additional classes on the checkbox
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) {

    span[a] = document.createElement("span");

    // Add additional classes for colors
    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;
 }

.green {
    background-color: green;
 }

.red {
    background-color: red;
 }

HTML:

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

jQuery 예:

라이브 데모를 보려면 아래 제공된 jQuery 예제를 참조하세요.

http://jsfiddle.net/jtbowden/xP2Ns/

이 솔루션은 CSS 조합을 사용합니다. , JavaScript 및 HTML을 사용하여 색상 오버레이로 대화형 체크박스 스타일을 구현합니다.

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