IE에서 확인란(체크박스) 스타일을 기본값으로 되돌리기
CSS로 한 번 스타일이 적용된 확인란(checkbox)은 일부 웹 브라우저, 특히 인터넷 익스플로러(IE)에서 기본 네이티브 스타일로 되돌리는 것이 불가능합니다. 따라서 확인란 자체의 스타일 초기화를 시도하기보다는, 확인란을 제외한 다른 입력 요소에만 선택적으로 스타일을 지정하는 방식으로 문제를 해결해야 합니다.
방법 1. 입력 유형을 하나씩 나열하여 스타일 적용
확인란을 제외한 각 입력 유형(text, password 등)을 선택자에 직접 나열하면 원치 않는 요소에 스타일이 적용되는 것을 막을 수 있습니다.
input[type="text"], input[type="password"] {
border: 2px solid green;
}방법 2. CSS3 :not() 가상 클래스 사용
CSS3의 :not() 가상 클래스를 사용하면 훨씬 간결하게 작성할 수 있습니다. 아래 코드는 확인란을 제외한 모든 input 요소에 스타일을 적용합니다. 다만 이 방법은 IE 11에서는 정상적으로 작동하지 않을 수 있으므로 주의가 필요합니다.
input:not([type="checkbox"]) {
border: 2px solid green;
}참고: 최신 브라우저에서의 대안
최신 브라우저에서는 appearance 속성(벤더 접두사 -webkit-appearance, -moz-appearance)을 활용해 폼 컨트롤을 기본 모양으로 복원할 수 있습니다. 예를 들어 appearance: auto;를 지정하면 브라우저의 기본 스타일이 다시 적용됩니다. 하지만 구형 IE에서는 이 속성이 지원되지 않으므로, IE 환경까지 고려해야 한다면 위에서 소개한 두 가지 방법을 사용하는 것이 가장 안전합니다.