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

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

---

다음을 사용하여 확인란의 스타일을 지정하려고합니다.

 

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

그러나 스타일은 적용되지 않습니다. 확인란은 여전히 기본 스타일을 표시합니다. 지정된 스타일을 어떻게 부여합니까?

답변

---

최신 정보:

아래 답변은 CSS 3이 널리 사용되기 전 상황을 참조합니다. 최신 브라우저 (Internet Explorer 9 이상 포함)에서는 JavaScript를 사용하지 않고 원하는 스타일로 확인란 대체를 만드는 것이 더 간단합니다.

다음은 몇 가지 유용한 링크입니다.

• CSS만으로 사용자 지정 양식 확인란 만들기
• 쉬운 CSS 체크 박스 생성기
• 체크 박스 해킹으로 할 수있는 일
• CSS3로 사용자 정의 체크 박스 및 라디오 버튼 구현
• CSS로 체크 박스 스타일을 지정하는 방법

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

이전 답변

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

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

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

출처 : https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css