CSS appearance 속성 – 브라우저 UI 요소의 기본 모양 제어

`appearance` 속성의 이해

appearance 속성은
각 브라우저에서 제공하는 버튼이나 입력 필드 등 컨트롤 요소의 기본 모양을 제어하는 데 사용됩니다.

컨트롤 요소란
사용자가 웹 페이지와 상호작용할 수 있도록 하는 요소들을 의미합니다.
<input>, <textarea>, <select>, <button> 등 사용자가 데이터를 입력하고, 선택하고, 제출하는 등의 작업을 할 수 있는 요소들이 해당됩니다. 이러한 요소들은 각 브라우저에서 제공하는 기본(네이티브) 모양이 있습니다.

각 브라우저에서 제공하는 버튼이나 입력 필드 등 컨트롤 요소의 기본 모양

HTML의 컨트롤 요소들은 각 브라우저에서 제공하는 기본 모양이 있습니다. 이 기본 모양을 '네이티브 모양(native appearance)'이라고 합니다. 네이티브 모양은 브라우저마다 약간씩 다른 스타일로 제공하며, 체크박스(<input type="checkbox">)가 체크되어 있는 상태처럼 CSS만으로는 완벽히 표현할 수 없는 모양과 느낌을 갖는 것도 있습니다.

appearance 속성은 이러한 기본 모양을 사용자 정의 스타일로 바꿀 수 있게 해주는 CSS 속성입니다.

특히, appearance: none을 사용하면 컨트롤 요소의 기본 모양이 제거되어 CSS로 자유롭게 스타일을 적용할 수 있습니다.

예제

HTML

<p>브라우저에서 제공하는 select 태그의 기본 모양</p>
<select>
    <option>option</option>
    <option>option</option>
</select>
<hr>
<p>appearance: none을 사용하면 컨트롤 요소의 기본 모양이 제거됩니다.</p>
<select style="appearance: none;">
    <option>option</option>
    <option>option</option>
</select>

주의하세요!
appearance: none을 사용하더라도 미미하지만 브라우저마다 약간씩 다른 스타일로 제공합니다. 웹사이트에서 이 속성을 사용하려면 신중하게 테스트를 해야 합니다. 스타일의 차이를 줄이려면 CSS로 사용자 정의 스타일을 추가해야 합니다.

appearance 속성의 형식은 다음과 같습니다.

형식 구문

형식 정의

appearance 속성의 형식 정의
초깃값	버튼이나 입력 필드 등 컨트롤 요소의 기본 모양을 제공하고 있는 요소: `auto` 버튼이나 입력 필드 등 컨트롤 요소의 기본 모양을 제공하고 있지 않은 요소: `none`
적용 요소	모든 요소
상속	아니오
애니메이션	아니오

값

appearance 속성의 값
`none`	버튼이나 입력 필드 등 컨트롤 요소의 기본 모양을 제공하고 있는 요소는 본래의 모양이 제거되어야 합니다. 대신 일반적인 CSS 규칙에 따라 렌더링됩니다. 버튼이나 입력 필드 등 컨트롤 요소의 기본 모양을 제공하고 있지 않은 요소는 이 값에 영향을 받지 않습니다.
`auto`	버튼이나 입력 필드 등 컨트롤 요소의 기본 모양을 제공하고 있는 요소는 각 브라우저에서 제공하는 기본 모양을 제공해야 합니다. 버튼이나 입력 필드 등 컨트롤 요소의 기본 모양을 제공하고 있지 않은 요소는 `none`으로 작동합니다.
`<compat-special>`	이 값은 이 속성의 이전 비표준 버전에 대해 개발된 콘텐츠의 호환성을 위해 존재합니다. 표준화된 버전부터는 `menulist-button` 또는 `textfield` 중 하나입니다. 브라우저별로 지원하는 값이 있지만, 이러한 값들은 표준화된 사양에서는 비표준 값으로 사용하지 말야합니다. 언제든지 브라우저에서 지원을 중단할 수 있습니다. 이 두 값은 모두 버튼이나 입력 필드 등 컨트롤 요소의 기본 모양을 제공하고 있지 않은 요소의 표준화된 사양의 `auto`와 동일합니다.
`<compat-auto>`	이 값은 이 속성의 이전 비표준 버전에서 개발된 값입니다. 이 값들은 다음과 같습니다. `button` `checkbox` `listbox` `menulist` `meters` `progress-bar` `push-button` `radio` `searchfield` `slider-horizontal` `square-button` `textarea` 브라우저별로 지원하는 값이 있지만, 이러한 값들은 표준화된 사양에서는 비표준 값으로 사용하지 말야합니다. 언제든지 브라우저에서 지원을 중단할 수 있습니다. 표준화된 사양의 `auto`와 동일합니다.

구문

CSS

/* 키워드 값 */
appearance: none;
appearance: auto;
appearance: <compat-special>; /* 비표준 값 */
appearance: <compat-auto>; /* 비표준 값 */

/* 전역 값 */
appearance: inherit;
appearance: initial;
appearance: revert;
appearance: revert-layer;
appearance: unset;

사용자 정의 스타일 예제

다음은 라디오 버튼(<input type="radio">)에 appearance: none을 사용해서 사용자 정의 스타일하는 예제입니다.

HTML

<input type="radio" name="radio-test"> <!--체크되지 않은 라디오 버튼 -->
<input type="radio" name="radio-test" checked> <!--체크되어 있는 상태의 라디오 버튼 -->

CSS

[type="radio"] {
    appearance: none;
    border-radius: 50%;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1px solid gray;
    cursor: pointer;
}
[type="radio"]:checked {
    border: 5px solid yellowgreen;
}

참고하세요! 🎨
CSS를 적용하면 나만의 스타일이 적용된 라디오 버튼을 디자인할 수 있습니다.
CSS 라디오 버튼을 커스텀 스타일링하는 방법을 참고하세요!

참고하세요! 🎨
CSS를 적용하면 나만의 스타일이 적용된 체크박스를 디자인할 수 있습니다.
CSS 체크박스(checkbox) 커스텀 스타일링하는 방법을 참고하세요!