CSS가 외부 웹사이트의 입력 필드에 텍스트 존재 여부를 어떻게 감지할 수 있습니까?

제어할 수 없는 페이지에서 CSS를 사용하여 입력 텍스트 존재 감지

입력 필드에서 텍스트 존재 여부를 감지하는 것은 일반적인 작업이지만 :empty와 같은 기존 방법 및 [value=""]는 모든 시나리오에서 효과적으로 작동하지 않을 수 있습니다. JavaScript에 액세스할 수 없는 상황에서는 CSS 스타일을 활용하여 이 목표를 달성할 수 있습니다.

:placeholder-shown 의사 클래스 사용

입력 요소에 자리 표시자 속성이 포함된 경우 , :placeholder-shown 의사 클래스가 작동합니다. 이 의사 클래스는 필드가 비어 있음을 나타내는 자리 표시자 텍스트가 보이는 입력 필드를 대상으로 합니다.

구현:

input:not(:placeholder-shown) {
  /* CSS styles applied when input has text */
}

input:placeholder-shown {
  /* CSS styles applied when input is empty */
}

사용 예:

<input placeholder="Text is required">

<input placeholder=" " value="This one is valid">

<input placeholder=" ">

이 접근 방식을 사용하면 처음 두 입력에 적용된 스타일이 적용됩니다. :not(:placeholder-shown)으로 변경됩니다. 텍스트가 포함되어 있거나 비어 있지 않은 자리 표시자 값이 있기 때문입니다. 자리 표시자는 있지만 텍스트는 없는 세 번째 입력은 :placeholder-shown에 적용된 스타일을 받습니다.

이 방법은 다음과 같은 브라우저 확장 프로그램을 사용하여 타사 페이지에 적용되는 테마 및 스타일로 작업할 때 특히 유용합니다. JavaScript 없이도 입력 필드의 텍스트 유무에 따라 사용자 정의가 가능하므로 스타일리시합니다.

위 내용은 CSS가 외부 웹사이트의 입력 필드에 텍스트 존재 여부를 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!