CSS의 appearance 속성을 사용하면 요소를 사용자 운영체제(OS)의 기본 플랫폼 스타일에 맞춰 표시할 수 있습니다. 이 속성은 브라우저가 제공하는 기본 UI(예: 숫자 입력 필드의 스핀 버튼, select 요소의 드롭다운 화살표 등)를 제어하는 데 널리 활용됩니다.
appearance 속성이란?
appearance 속성값을 none으로 설정하면 해당 요소에 적용된 브라우저의 기본 스타일과 UI 컨트롤이 제거됩니다. 이를 통해 개발자는 완전히 자유로운 커스텀 스타일링을 적용할 수 있습니다.
문법(Syntax)
CSS appearance 속성의 기본 문법은 다음과 같습니다. 브라우저 호환성을 위해 벤더 접두사(vendor prefix)를 함께 작성하는 것이 좋습니다.
Selector {
appearance: /*값*/;
-webkit-appearance: /*값*/; /* Safari, Chrome용 */
-moz-appearance: /*값*/; /* Firefox용 */
}예제 1: number 입력 필드의 스핀 버튼 제거하기
다음 예제는 appearance 속성을 사용해 숫자 입력 필드(<input type="number">)에서 나타나는 위/아래 화살표(스핀 버튼)를 숨기는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=number] {
width: 40px;
-moz-appearance: textfield;
}
input[type=number]:hover {
background-color: #e3f5a1;
}
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
</style>
</head>
<body>
<p>입력 또는 스크롤로 값을 변경해 보세요</p>
<input type="number" value="6">
</body>
</html>위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
Firefox에서는 -moz-appearance: textfield;가 적용되고, Chrome이나 Safari 같은 WebKit 계열 브라우저에서는 ::-webkit-inner-spin-button 가상 요소에 -webkit-appearance: none;을 지정하여 스핀 버튼이 사라지는 것을 확인할 수 있습니다.
예제 2: select 요소의 드롭다운 화살표 숨기기
다음 예제는 <select> 요소에 나타나는 기본 드롭다운 화살표를 appearance 속성으로 제거하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
select {
width: 20%;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
</style>
</head>
<body>
드롭다운 화살표 숨기기<br/><br/>
<select>
<option value="none" selected disabled hidden>
색상 선택
</option>
<option>빨강</option>
<option>파랑</option>
<option>초록</option>
<option>노랑</option>
<option>주황</option>
</select>
</body>
</html>위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
마무리 정리
appearance 속성은 세 가지 형태(appearance, -webkit-appearance, -moz-appearance)를 모두 함께 선언해야 크롬, 사파리, 파이어폭스 등 주요 브라우저에서 일관된 결과를 얻을 수 있습니다. 특히 select 요소의 기본 화살표를 없앤 후에는 배경 이미지나 SVG 아이콘 등으로 커스텀 화살표를 추가하면 더욱 세련된 UI를 구현할 수 있습니다.