CSS의 :invalid 가상 선택자를 사용하면 네이티브 밸리데이션을 통과하지 못한 폼과 필드에 커스텀 스타일을 매길 수 있습니다.
문제는 아무것도 입력하지 않은 상태에선 모든 필드가 :invalid라는 거죠.
결국 JS를 사용할 수밖에 없게 되는데요. 전 이게 좀 맘에 안 듭니다.
https://codepen.io/mytory/pen/wvObpKX
더 많은 콘텐츠를 보고 싶다면?
이미 회원이신가요?
2024년 2월 22일 오전 9:15
나중에 :blank가 지원되면 좋겠네요.
@박한수 / 안녕하세요. 이 글을 작성하던 당시엔 몰랐는데 다른 분의 조언으로 :user-invalid라는 가상 선택자가 있다는 걸 알게 됐습니다. 이걸 사용하면 위에 제가 제기한 문제가 해결됩니다. 관련해 글을 작성했습니다. https://mytory.net/archives/16110