비어 있지 않지만 유효하지 않은 입력 요소를 CSS로 타겟팅하는 방법

오늘 양식에 대한 Twitter 스레드가 내 타임라인을 통과했습니다. 스레드에는 지금까지 내 레이더에 없었던 스마트 CSS 규칙이 포함되어 있습니다. 유효하지 않지만 비어 있지 않은(!) 입력 요소를 대상으로 합니다. 그래서, 왜 멋진가요? 한발 물러서자...

입력 요소는 입력 필드 유효성 검사를 활성화할 수 있는 여러 HTML 속성을 지원합니다. 이러한 속성은 입력 요소type를 정의하여 이메일 유효성 검사를 활성화하거나pattern 특정 문자만 허용하거나required 요소를 필수 입력 항목으로 표시하는 데 사용됩니다.

다음과 같은 이메일 필드가 있을 수 있습니다.

<!-- a required email address -->
<input type="email" placeholder="[email protected]" required>

누군가 필드와 상호 작용한 후 필드 요소가 유효하지 않음을 어떻게 표시할 수 있습니까? CSS는 해당 사용 사례에 대해 (적어도 이론적으로) :invalid 의사 클래스를 제공합니다.

input:invalid {
  border: 2px solid red;
}

이 의사 클래스의 문제는 입력 요소가 비어 있거나 사용자가 입력 요소와 상호작용하지 않은 경우에도 입력 요소와 일치한다는 것입니다. 유효성 검사 상태를 시각화하기 위해 :invalid 유사 클래스에 의존하는 경우 사용자의 양식 편집 경험은 많은 빨간색 테두리로 시작됩니다. 좋지 않습니다! 안타깝게도 :empty 가상 클래스도 자식이 없는 요소를 대상으로 하기 때문에 큰 도움이 되지 않습니다. 대신 무엇을 사용할 수 있습니까?



완벽한 솔루션은 아니지만 Arslan이 제안한 CSS 규칙은 순전히 :invalid에 의존하는 것보다 낫습니다. :invalid와 함께 :not(:placeholder-shown)를 사용합니다. 이렇게 하면 자리 표시자가 표시되지 않을 때만 요소가 유효하지 않은 것으로 표시됩니다(더 이상 비어 있지 않음을 의미).

input:not(:placeholder-shown):invalid {
  border: 2px solid red;
}

브라우저 지원이 궁금하시다면 :placeholder-shown is cross-browser supported these days .

편집됨: 누군가가 여전히 입력하는 동안 유효성 검사 상태가 없도록 선택기를 :focus와 결합하는 것이 좋을 것입니다. 동의합니다. 좋은 생각입니다. 고마워, 에이미!

input:not(:placeholder-shown):not(:focus):invalid {
  border: 2px solid red;
}

또한, Koen Cornelis brought up the point that placeholders usually have more disadvantages than advantages . 자리 표시자 값을 정의하지 않으려면 공백을 사용하여 동일한 CSS 기능을 유지할 수 있습니다.

<!-- a required email address with a placeholder space -->
<input type="email" placeholder=" " required>

여기a quick CodePen에서 선택기가 작동하는 것을 보고 . 👋