스크롤 가능한 Div 내부의 체크박스에서 '배경색'이 작동하지 않는 이유는 무엇입니까?-CSS 튜토리얼-php.cn

스크롤 가능한 Div 내부의 체크박스에서 '배경색'이 작동하지 않는 이유는 무엇입니까?

Patricia Arquette

풀어 주다： 2024-11-26 03:23:08

원래의

253명이 탐색했습니다.

Why Doesn't `background-color` Work on Checkboxes Inside a Scrollable Div?

내 체크박스에서 CSS "배경색" 속성이 작동하지 않습니다. 문의에서 강조된 문제는 스크롤 가능한 div 내에 포함된 체크박스에 영향을 주는 "배경색" 속성입니다. "margin-top"과 같은 속성은 예상대로 작동하지만 "배경색"은 여전히 유효하지 않습니다.

이 동작을 이해하려면 확인란이 상위 요소에서 배경색을 상속한다는 점에 유의하는 것이 중요합니다. 기본적으로 확인란의 기본 배경색은 브라우저의 스타일에 따라 다릅니다. 따라서 체크박스 자체의 배경색을 직접 설정하는 것은 불가능합니다.

원하는 효과를 제공하려면 원하는 배경색이 있는 div 요소 내에 각 체크박스를 래핑하여 다른 접근 방식을 취할 수 있습니다. 이런 식으로 div 요소는 확인란을 보유하고 배경색 설정을 위한 프록시 역할을 합니다. 예:

<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>
<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>

로그인 후 복사

.evenRow {
    background-color: #9FFF9D;
}

.oddRow {
    background-color: #ffffff;
}

로그인 후 복사

위 내용은 스크롤 가능한 Div 내부의 체크박스에서 '배경색'이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!