appearance

브라우저가 폼 요소에 적용하는 기본 스타일을 제거합니다. appn은 커스텀 폼 디자인의 시작점이며, select, checkbox, radio 등을 완전히 커스터마이징할 때 필수적입니다.

클래스 목록

클래스	CSS	설명
`appn`	appearance: none	브라우저 기본 폼 스타일 제거
`appa`	appearance: auto	브라우저 기본 폼 스타일 사용(기본값)

클래스별 상세

`appn`appearance: none

운영체제와 브라우저가 폼 요소에 적용하는 네이티브 스타일(그림자, 테두리, 배경, 화살표 등)을 모두 제거합니다. 이후 Atomic CSS 클래스로 원하는 디자인을 자유롭게 적용할 수 있습니다.

<!-- Default: remove appearance then apply custom styles -->
<select class="appn bn b1pxsolid27272A bg18181B cFAFAFA py12px px16px br8px w100p fs14px cp focus-bc6366F1">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

<!-- checkbox -->
<input type="checkbox" class="appn w2rem h2rem br4px b1pxsolid27272A bg18181B cp checked-bg6366F1" />

<!-- radio -->
<input type="radio" class="appn w2rem h2rem br50p b1pxsolid27272A bg18181B cp checked-bg6366F1" />

`appa`appearance: auto

브라우저와 운영체제가 제공하는 네이티브 폼 스타일을 그대로 사용합니다. 대부분의 폼 요소에서 이미 기본값이므로, 실제로는 상위에서 적용된 초기화를 되돌리거나 특정 조건에서만 네이티브 외형으로 되돌릴 때 사용합니다.

<!-- Restore the native control on a specific element -->
<select class="appa">
  <option>Native select</option>
</select>

<!-- Reset only on small screens, keep the custom look on desktop -->
<input type="checkbox" class="appn sm-appa w2rem h2rem br4px b1pxsolid27272A" />

<!-- Opt a single field out of a reset applied to a whole form -->
<form class="df fdc gap12px">
  <input type="date" class="appa b1pxsolid27272A br8px p12px" />
</form>

예를 들어 폼 전체에 appn을 적용한 뒤 날짜 선택기처럼 네이티브 UI가 더 편한 입력 하나만 appa로 되돌릴 수 있습니다. 반응형 접두사와 조합해 작은 화면에서만 네이티브 컨트롤을 쓰는 것도 가능합니다.

주요 적용 대상

appn이 효과를 발휘하는 대표적인 폼 요소들입니다.

요소	제거되는 스타일	추가 필요 클래스
select	드롭다운 화살표, 네이티브 테두리	`bn p12px br8px`
input[type=checkbox]	체크박스 외형	`w2rem h2rem br4px`
input[type=radio]	라디오 버튼 원형	`w2rem h2rem br50p`
input[type=range]	슬라이더 트랙/핸들	`w100p h8px br4px`
button	버튼 기본 스타일	`bn p12px br8px cp`

실전 예시

커스텀 Select

<!-- Custom select dropdown -->
<div class="pr">
  <select class="appn bn b1pxsolid27272A bg18181B cFAFAFA py12px pl16px pr4rem br8px w100p fs14px cp focus-bc6366F1 tall200msease">
    <option>Select framework</option>
    <option>Vue</option>
    <option>React</option>
    <option>Svelte</option>
  </select>
</div>

커스텀 Checkbox

<!-- Custom Checkbox -->
<label class="df aic gap8px cp">
  <input type="checkbox" class="appn w2rem h2rem br4px b2pxsolid27272A bg18181B cp checked-bg6366F1 checked-bc6366F1 tall200msease" />
  <span class="fs14px cFAFAFA">I agree to the terms of service</span>
</label>

커스텀 Range Input

<!-- Custom Range Slider -->
<input type="range" class="appn w100p h8px br4px bg27272A cp" min="0" max="100" value="50" />

팁 & 주의사항

항상 대체 스타일 제공

appn만 적용하면 요소가 스타일 없이 렌더링됩니다. 반드시 border, padding, background 등의 Atomic 클래스를 함께 추가하세요.

select 화살표

appn을 적용하면 select의 드롭다운 화살표가 사라집니다. 커스텀 화살표를 배경 이미지나 가상 요소로 추가해야 합니다.

접근성 유지

기본 스타일을 제거해도 키보드 접근성과 포커스 표시는 유지해야 합니다. focus- 의사 클래스로 포커스 스타일을 반드시 추가하세요.

user-select cursor overflow