폼 요소의 상태와 일관된 입력 스타일을 설계합니다.
label은 block으로 분리하고 입력은 충분한 크기와 명확한 border를 둡니다. :focus-visible, :invalid, :disabled 상태를 구분하되 브라우저 기본 사용성을 해치지 않습니다.
이번 예제의 출발점은 input:focus { border-color: ...; }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 입력창을 클릭해 focus 스타일을 확인하고 invalid 스타일을 추가하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
placeholder만 label처럼 쓰거나 focus outline을 제거하지 마세요.
직접 바꿔보세요입력창을 클릭해 focus 스타일을 확인하고 invalid 스타일을 추가하세요.