📌 appearance
: 브라우저(운영 체제)의 기본 UI 요소를 해제하거나 변경할 때 사용하는 속성
- 텍스트 입력 요소(input), 체크 박스, 라디오 버튼 등을 스타일링하거나 User Agent Style(기본 스타일)을 제거할 때 사용한다.
- 크로스 브라우징 이슈로 인해 모든 브라우저에서 완벽하게 지원되지 않을 수 있다.
👉 JavaScript나 다른 방법을 사용하여 스타일을 조정하는 것이 더 안전한 접근일 수 있음
- auto: 웹 요소가 브라우저의 기본 스타일을 사용
- 기본값
- 특별한 스타일을 지정하지 않았을 때의 스타일로 동작한다. (User Agent Style)
- none: 요소의 기본 스타일(User Agent Style)을 무시하고 사용자가 지정한 스타일만 적용
- 요소의 외관이 완전히 사용자 에이전트의 스타일을 무시하고 사용자가 지정한 스타일만 적용된다.
- menulist-button / textfield: 특정 요소에 대해 사용자 에이전트의 기본 스타일을 적용
- 요소에 특별한 스타일링이 없는 경우에는 auto와 동일하다.
- button, checkbox / listbox / menulist / meter / progress-bar / push-button / radio / searchfield / slider-horizontal / square-button / textarea
- 특정 요소에 대해 사용자 에이전트의 기본 스타일을 적용
- 이전 버전의 브라우저와의 호환성을 유지하기 위해 사용
- 요소에 특별한 스타일링이 없는 경우에는 auto와 동일하다.
/* CSS Basic User Interface Module Level 4 values */
appearance: none;
appearance: auto;
appearance: menulist-button;
appearance: textfield;
/* <compat-auto> values have the same effect as 'auto' */
appearance: button;
appearance: checkbox;
참고
appearance - CSS: Cascading Style Sheets | MDN
The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme.
developer.mozilla.org