[TailwindCSS] Pseudo classes - Form States

1. Disabled

disabled 수정자를 사용하여 비활성화된 입력 요소를 스타일링할 수 있다.

<input class="disabled:opacity-75 ..." disabled />

2. Enabled

enabled 수정자를 사용하여 활성화된 입력 요소를 스타일링할 수 있다. 특히 비활성화되지 않은 요소에만 다른 스타일을 적용하려는 경우 유용하다.

<input class="enabled:hover:border-gray-400 disabled:opacity-75 ..." />

3. Checked

checked 수정자를 사용하여 체크된 체크박스나 라디오 버튼을 스타일링할 수 있다.

<input type="checkbox" class="appearance-none checked:bg-blue-500 ..." />

4. Indeterminate

indeterminate 수정자를 사용하여 불확정 상태의 체크박스나 라디오 버튼을 스타일링할 수 있다.

<input type="checkbox" class="appearance-none indeterminate:bg-gray-300 ..." />

5. Default

default 수정자를 사용하여 페이지가 처음 로드될 때 기본값으로 설정된 옵션, 체크박스, 라디오 버튼을 스타일링할 수 있다.

<input type="checkbox" class="default:ring-2 ..." />

6. Required

required 수정자를 사용하여 필수 입력 요소를 스타일링할 수 있다.

<input class="required:border-red-500 ..." required />

7. Valid

valid 수정자를 사용하여 유효한 입력 요소를 스타일링할 수 있다.

<input class="valid:border-green-500 ..." />

8. Invalid

invalid 수정자를 사용하여 유효하지 않은 입력 요소를 스타일링할 수 있다.

<input class="invalid:border-red-500 ..." />

9. In-range

in-range 수정자를 사용하여 값이 지정된 범위 내에 있을 때 입력 요소를 스타일링할 수 있다.

<input min="1" max="5" class="in-range:border-green-500 ..." />

10. Out-of-range

out-of-range 수정자를 사용하여 값이 지정된 범위를 벗어날 때 입력 요소를 스타일링할 수 있다.

<input min="1" max="5" class="out-of-range:border-red-500 ..." />

11. Placeholder-shown

placeholder-shown 수정자를 사용하여 플레이스홀더가 표시될 때 입력 요소를 스타일링할 수 있다.

<input class="placeholder-shown:border-gray-500 ..." placeholder="you@example.com" />

12. Autofill

autofill 수정자를 사용하여 브라우저에 의해 자동으로 채워진 입력 요소를 스타일링할 수 있다.

<input class="autofill:bg-yellow-200 ..." />

13. Read-only

read-only 수정자를 사용하여 읽기 전용 입력 요소를 스타일링할 수 있다.

<input class="read-only:bg-gray-100 ..." readonly />