Firefox 29에서 내 체크박스의 배경색을 변경할 수 없는 이유는 무엇입니까?

체크박스 색상 수정 문제 해결

다양한 CSS 스타일을 시도해 보았음에도 체크박스의 배경색을 변경하는 데 어려움을 겪었습니다. 최신 버전인 Firefox 29를 사용하는 경우 이러한 동작은 특히 당황스럽습니다. 이 문제를 해결하기 위해 기본 CSS 및 브라우저 동작을 조사해 보겠습니다.

CSS 스타일시트

귀하가 제공한 CSS에는 확인란 스타일을 지정하는 두 가지 규칙이 포함되어 있습니다.

<code class="css">input[type="checkbox"] {
    background: #990000;
}

.chk {
   background-color: #990000;
}</code>

첫 번째 규칙은 속성 선택기를 사용하는 모든 확인란을 대상으로 하고, 두 번째 규칙은 "chk" 클래스가 있는 요소를 대상으로 합니다. 두 경우 모두 배경색은 #990000으로 설정됩니다.

브라우저 동작

Firefox는 다른 브라우저와 마찬가지로 체크박스와 같은 양식 요소에 대해 특정 기본 스타일을 구현했습니다. . 이러한 기본 스타일은 CSS 규칙을 재정의하여 체크박스의 모양을 변경하기 어렵게 만들 수 있습니다.

해결책

이 문제를 해결하려면 악센트를 활용할 수 있습니다. 체크박스를 포함한 다양한 양식 요소의 색상을 지정할 수 있는 색상 속성입니다. 업데이트된 CSS 예는 다음과 같습니다.

<code class="css">#cb1 {
  accent-color: #9b59b6;
}

#cb2 {
  accent-color: #34495e;
}

#cb3 {
  accent-color: #e74c3c;
}</code>

이 예에서는 체크박스 요소에 #cb ID 속성을 사용하여 다양한 강조 색상이 할당됩니다. 이렇게 하면 기본 브라우저 스타일이 무시되고 확인란 색상을 원하는 대로 변경할 수 있습니다.

위 내용은 Firefox 29에서 내 체크박스의 배경색을 변경할 수 없는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!