CSS의 appearance(모양) 속성은 요소를 사용자 운영체제(OS)의 플랫폼 기본 스타일에 맞춰 표시하거나, 반대로 기본 스타일을 완전히 제거하는 데 사용됩니다. 이 속성 값을 none으로 지정하면 브라우저가 기본적으로 제공하는 라디오 버튼·체크박스 등의 UI가 사라지므로, 개발자가 원하는 완전히 새로운 커스텀 디자인을 자유롭게 적용할 수 있습니다.
appearance 속성 문법
CSS appearance 속성의 기본 문법은 다음과 같습니다.
Selector {
appearance: /*값*/;
-webkit-appearance: /*값*/; /* Safari 및 Chrome */
-moz-appearance: /*값*/; /* Firefox */
}
최신 브라우저는 접두사 없는 appearance 속성을 대부분 지원하지만, 구형 브라우저와의 호환성을 위해 -webkit-, -moz- 벤더 접두사를 함께 작성해 주는 것이 안전합니다.
예제 1: 기본적인 커스텀 라디오 버튼
다음 예제는 appearance 속성으로 라디오 버튼의 기본 모양을 제거한 뒤, 원형 배경색으로 새롭게 스타일링한 것입니다.
<!DOCTYPE html>
<html>
<style>
input[type=radio] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 10px;
background-color: orange;
border-radius: 50%;
}
input[type=radio]:checked {
background-color: magenta;
}
input[type=radio]:hover {
cursor: pointer;
}
</style>
<body>
커스텀 라디오 버튼 예제<br/>
<form>
<label for="r1">r1</label>
<input type="radio" id="r1" name="btn" value="v1">
<input type="radio" id="r2" name="btn" value="v2">
<label for="r2">r2</label>
</form>
</body>
</html>
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
이 예제에서 라디오 버튼은 기본 상태에서 주황색(orange) 원형으로 표시되며, 선택되면 마젠타(magenta) 색상으로 바뀝니다. 또한 마우스를 올리면 포인터 커서가 나타나 클릭 가능한 요소임을 직관적으로 알려 줍니다.
예제 2: 애니메이션이 적용된 토글 스위치 스타일
다음 예제는 체크박스에 appearance 속성과 가상 요소(::after), 전환(transition) 효과를 조합하여 부드러운 애니메이션이 있는 토글 스위치 형태로 재구성한 것입니다.
<!DOCTYPE html>
<html>
<style>
label {
display: flex;
align-items: top;
}
label input {
margin: 0px 10px 0px 10px;
}
input[type=checkbox] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
border: 3px ridge currentcolor;
border-radius: 60px;
box-sizing: content-box;
color: lightblue;
height: 60px;
padding: 2px 2px 2px 2px;
transition-duration: 280ms;
transition-property: border-color, color;
transition-timing-function: ease;
width: 20px;
}
input[type=checkbox]:checked {
color: lightgreen;
}
input[type=checkbox]::after {
background-color: currentcolor;
border-radius: 10px 10px 10px 10px;
content: "";
display: block;
height: 20px;
transform: translateY(0px);
transition: transform 300ms ease-in;
width: 20px;
}
input[type=checkbox]:checked::after {
transform: translateY(40px);
}
</style>
<body>
<p>
커스텀 라디오 버튼 예제
<label for="crb">
파랑
<input id="crb" type="checkbox"/>
<br/><br/><br/>초록
</label>
</p>
</body>
</html>
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
체크박스를 선택하기 전에는 연한 파란색(lightblue) 테두리와 손잡이가 위쪽에 위치하고, 선택하면 연한 초록색(lightgreen)으로 색상이 전환되면서 손잡이가 아래로 부드럽게 이동합니다. 이처럼 appearance 속성을 활용하면 브라우저 기본 폼 요소의 한계를 벗어나, 사이트 디자인에 어울리는 개성 있는 라디오 버튼과 체크박스를 손쉽게 구현할 수 있습니다.