appearance

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS	설명
`appn`	appearance: none	Remove browser default form styles

클래스별 상세

`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" />

주요 적용 대상

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

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">요소	제거되는 스타일	추가 필요 클래스
select	Dropdown arrow, native border	`bn p12px br8px`
input[type=checkbox]	Checkbox appearance	`w2rem h2rem br4px`
input[type=radio]	Radio button circle	`w2rem h2rem br50p`
input[type=range]	Slider track/handle	`w100p h8px br4px`
button	Button default styles	`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