인터랙티비티
appearance
기본 폼 컨트롤 스타일링을 제거하는 유틸리티입니다.
| Class | Styles |
|---|---|
appearance-none | appearance: none; |
appearance-auto | appearance: auto; |
예제
기본 스타일 제거
appearance-none을 사용하면 엘리먼트에 적용된 브라우저별 기본 스타일을 초기화할 수 있습니다.
브라우저 기본 스타일 적용됨
브라우저 기본 스타일 제거됨
<select> <option>Yes</option> <option>No</option> <option>Maybe</option></select><div class="grid"> <select class="col-start-1 row-start-1 appearance-none bg-gray-50 dark:bg-gray-800 ..."> <option>Yes</option> <option>No</option> <option>Maybe</option> </select> <svg class="pointer-events-none col-start-1 row-start-1 ..."> <!-- ... --> </svg></div>이 유틸리티는 주로 커스텀 폼 컴포넌트를 만들 때 사용됩니다.
기본 모양 복원하기
appearance-auto를 사용하면 엘리먼트에 브라우저별 기본 스타일을 복원할 수 있습니다:
개발자 도구에서 `forced-colors: active`를 에뮬레이트하여 차이점을 확인해 보세요
<label> <div> <input type="checkbox" class="appearance-none forced-colors:appearance-auto ..." /> <svg class="invisible peer-checked:visible forced-colors:hidden ..."> <!-- ... --> </svg> </div> 기본 모양으로 복원</label><label> <div> <input type="checkbox" class="appearance-none ..." /> <svg class="invisible peer-checked:visible ..."> <!-- ... --> </svg> </div> 커스텀 모양 유지</label>이 기능은 특정 접근성 모드에서 표준 브라우저 컨트롤로 되돌릴 때 유용합니다.
반응형 디자인
접두사 an appearance 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<select class="appearance-auto md:appearance-none ..."> <!-- ... --></select>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
