appearance

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

클래스 목록

클래스	CSS	설명
`appn`	appearance: none	브라우저 기본 폼 스타일 제거

클래스별 상세

`appn`appearance: none

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

<!-- 기본: appearance 제거 후 커스텀 스타일 -->
<select class="appn bn b1pxsolid27272A bg18181B cFAFAFA py12px px16px br8px w100p fs14px cp focus-bc6366F1">
  <option>옵션 1</option>
  <option>옵션 2</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" />

주요 적용 대상

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

<!-- 커스텀 Select 드롭다운 -->
<div class="pr">
  <select class="appn bn b1pxsolid27272A bg18181B cFAFAFA py12px pl16px pr4rem br8px w100p fs14px cp focus-bc6366F1 tall200msease">
    <option>프레임워크 선택</option>
    <option>Vue</option>
    <option>React</option>
    <option>Svelte</option>
  </select>
</div>

커스텀 Checkbox

<!-- 커스텀 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">이용약관에 동의합니다</span>
</label>

커스텀 Range Input

<!-- 커스텀 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