CSS의 appearance 속성은 요소를 사용자 운영체제(OS)의 기본 네이티브 스타일에 맞춰 표시하거나, 반대로 기본 스타일을 제거하여 완전히 새로운 디자인을 적용할 수 있게 해주는 강력한 도구입니다. 이 속성을 활용하면 브라우저가 제공하는 기본 체크박스 모양을 없애고 자신만의 개성적인 체크박스를 손쉽게 만들 수 있습니다.
문법(Syntax)
CSS appearance 속성의 기본 문법은 다음과 같습니다.
Selector {
appearance: /*값*/;
-webkit-appearance: /*값*/; /* Safari 및 Chrome 전용 */
-moz-appearance: /*값*/; /* Firefox 전용 */
}크로스 브라우저 호환성을 위해 표준 속성인 appearance와 함께 벤더 접두사인 -webkit-appearance, -moz-appearance를 함께 작성하는 것이 좋습니다.
예제 1: 원형 커스텀 체크박스
다음 예제는 appearance 속성을 사용하여 기본 체크박스의 모양을 제거하고, 원형 디자인과 그림자 효과가 적용된 사용자 정의 체크박스를 구현한 것입니다.
<!DOCTYPE html>
<html>
<style>
input[type=checkbox] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 12px;
background-color: cyan;
box-shadow: inset 0 3px 3px 5px lightgreen;
border-radius:50%;
}
input[type=checkbox]:checked {
background-color: coral;
border: 6px solid cornflowerblue;
box-shadow: 0 1px 2px lightorange;
}
input[type=checkbox]:checked:after {
content:"Checked";
}
</style>
<body>
<input type="checkbox"> Custom Checkbox Example
</body>
</html>위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
이 예제에서 appearance: none으로 기본 체크박스 스타일을 제거한 후, border-radius: 50%로 원형 모양을 만들고 배경색과 내부 그림자(inset box-shadow)를 조합해 입체감을 더했습니다. 또한 :checked 가상 클래스를 활용해 체크 상태일 때 배경색, 테두리, 텍스트가 변경되도록 설정했습니다.
예제 2: 체크 마크(✓)가 표시되는 커스텀 체크박스
다음 예제는 체크 시 유니코드 문자를 활용해 체크 마크가 나타나는 스타일의 사용자 정의 체크박스입니다.
<!DOCTYPE html>
<html>
<style>
input[type=checkbox] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 10px;
background-color: cyan;
border-radius:5%;
}
input[type=checkbox]:checked {
background-color: magenta;
}
input[type=checkbox]:checked:before {
content:"\2713";
color: white;
padding: initial;
font-weight: bold;
}
</style>
<body>
<input type="checkbox"> Another Custom Checkbox Example
</body>
</html>위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
여기서는 :before 가상 요소의 content 속성에 유니코드 값 \2713(체크 마크 ✓)을 지정하여, 체크박스가 선택되었을 때 흰색 굵은 글씨의 체크 표시가 나타나도록 했습니다.
정리
appearance 속성을 none으로 설정하면 브라우저 및 운영체제의 기본 UI 스타일이 제거되므로, 배경색, 테두리, 그림자, 가상 요소 등 다양한 CSS 기법을 자유롭게 조합해 디자인할 수 있습니다. 이처럼 CSS만으로도 JavaScript 없이 세련된 사용자 정의 체크박스를 구현할 수 있습니다.