강력한 스타일링 솔루션을 위해 회색 확인란에 CSS 색상을 오버레이하려면 어떻게 해야 합니까?

CSS를 사용한 체크박스 스타일 지정: 강력한 솔루션

체크박스에 대한 다양한 CSS 스타일링 기술이 존재하지만, 이 조사에서는 다음을 가능하게 하는 보다 강력한 접근 방식을 추구합니다. CSS 정의 색상을 회색 체크박스에 오버레이합니다. 이는 각각 고유한 색상이 필요한 예측할 수 없는 수의 확인란을 처리할 때 특히 유용하며, 과다한 이미지를 생성할 필요가 없습니다.

이 솔루션에는 외부가 흰색이고 투명 PNG 이미지를 활용하는 것이 포함됩니다. 확인란이 부분적으로 투명합니다. 그런 다음 이 이미지는 CSS 배경색을 사용하여 확인란에 오버레이되어 색상이 지정된 확인란이 됩니다.

이 접근 방식을 구현하려면 다음 CSS, JS 및 HTML 수정이 필요합니다.

JS:

// Change all instances of '== "styled"' to '.search(...)' to handle additional classes
if ((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) {
    span[a] = document.createElement("span");
    // Add '+ ...' to handle additional classes on the checkbox
    span[a].className = inputs[a].type + inputs[a].className.replace(/^styled/, "");
}

CSS:

.checkbox, .radio {
    width: 19px;
    height: 25px;
    padding: 0px; // Removes padding to eliminate color bleeding around image
    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" class="styled green" /> (green)</p>
<p><input type="checkbox" name="2" class="styled red" /> (red)</p>
<p><input type="checkbox" name="3" class="styled purple" /> (purple)</p>

이 접근 방식은 투명 이미지를 CSS 배경색으로 오버레이하여 색상이 지정된 확인란을 만드는 원리를 활용합니다. 다수의 이미지가 필요 없이 다양한 색상으로 체크박스를 동적으로 스타일링할 수 있는 강력한 솔루션을 제공합니다.

위 내용은 강력한 스타일링 솔루션을 위해 회색 확인란에 CSS 색상을 오버레이하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!