CSS 팁: CSS를 사용하여 체크박스 스타일을 지정하는 방법

Question

다음을 사용하여 체크박스 스타일을 지정하려고 합니다.

으아악

하지만 스타일이 적용되지 않습니다. 확인란에는 여전히 기본 스타일이 표시됩니다. 특정 스타일을 부여하는 방법은 무엇입니까?

Answer 1

:after 和 :before 의사 클래스와 함께 제공되는 새로운 기능을 사용하면 매우 멋진 사용자 정의 체크박스 효과를 얻을 수 있습니다. 이것의 장점은 DOM에 다른 것을 추가할 필요 없이 표준 체크박스만 추가할 필요가 있다는 것입니다.

이 기능은 호환되는 브라우저에서만 작동합니다. 나는 이것이 입력 요소에 :after 和 :before 설정을 허용하지 않는 일부 브라우저와 관련이 있다고 생각합니다. 안타깝게도 이는 현재 WebKit 브라우저만 지원된다는 의미입니다. Firefox + Internet Explorer에서는 스타일링 없이도 체크박스가 작동하도록 허용합니다. 이는 향후 변경될 것으로 예상됩니다(코드는 공급업체 접두사를 사용하지 않음).

이것은 단지 WebKit 브라우저 솔루션입니다(Chrome, Safari, 모바일 브라우저)

예제 보기 Fiddle

으아악 으아악 으아악

추가 웹킷 스타일 플립 바이올린

으아악 으아악 으아악

Answer 2

업데이트:

아래 답변은 CSS 3가 널리 사용되기 전의 상황을 나타냅니다. Internet Explorer 9 이상을 포함한 최신 브라우저에서는 JavaScript를 사용하지 않고도 원하는 스타일로 확인란 대체 항목을 만드는 것이 더 쉽습니다.

다음은 유용한 링크입니다:

• CSS만 사용하여 사용자 정의 양식 체크박스 만들기李>
• 간단한 CSS 체크박스 생성기
• Checkbox Hack으로 할 수 있는 일
• CSS3을 사용하여 맞춤 체크박스와 라디오 버튼 구현
• CSS를 사용하여 체크박스 스타일을 지정하는 방법

근본적인 문제는 변하지 않았다는 점에 주목할 필요가 있습니다. 여전히 체크박스 요소에 스타일(테두리 등)을 직접 적용할 수 없으며 해당 스타일이 HTML 체크박스 표시에 영향을 미치게 할 수 없습니다. 그러나 변경된 점은 이제 CSS만 사용하여 실제 체크박스를 숨기고 자신만의 스타일 요소로 바꿀 수 있다는 것입니다. 특히, CSS는 이제 :checked 선택기를 광범위하게 지원하므로 상자의 체크된 상태를 정확하게 반영하도록 교체를 수행할 수 있습니다.

---

오래된 답변

체크박스 스타일링에 관한 유용한 기사입니다. 기본적으로 이 저자는 이것이 브라우저마다 크게 다르며 스타일을 어떻게 지정하든 많은 브라우저가 항상 기본 확인란을 표시한다는 사실을 발견했습니다. 그래서 정말 쉬운 방법이 없습니다.

JavaScript를 사용하여 체크박스에 이미지를 오버레이한 다음 이미지를 클릭하면 실제 체크박스가 선택되는 해결 방법을 상상하는 것은 어렵지 않습니다. JavaScript가 없는 사용자에게는 기본 확인란이 표시됩니다.

추가하도록 편집됨: 여기에 이 작업을 수행하는 멋진 스크립트 가 있습니다. 이 스크립트는 실제 체크박스 요소를 숨기고 스타일이 지정된 범위로 대체하며 클릭 이벤트를 리디렉션합니다.