페이지를 제어할 수 없지만 CSS를 통해 입력에 텍스트가 포함되어 있는지 감지합니다.

Question

CSS를 통해 입력 상자에 텍스트가 있는지 감지하는 방법이 있나요? :empty 의사 클래스와 [value=""]를 사용해 보았으나 성공하지 못했습니다. 해결책을 찾을 수 없는 것 같습니다.

비슷한 :checked 및 :indeterminate와 같은 의사 클래스가 있다는 점을 고려하면 가능할 것 같습니다.

참고: "세련된" 스타일을 위해 이 작업을 수행하고 있으며 JavaScript를 사용할 수 없습니다.

또한 Stylish는 클라이언트측에서 사용자가 제어할 수 없는 페이지에 사용된다는 점에 유의하세요.

Answer 1

유사 클래스를 :placeholder-shown사용할 수 있습니다. 기술적으로 자리 표시자가 필요하지만 대신 공백을 사용할 수 있습니다.

으아아아 으아아아

Answer 2

Stylish에서는 CSS가 허용하지 않기 때문에 이 작업을 수행할 수 없습니다. CSS에는 <input> 값에 대한 (의사) 선택기가 없습니다. 참조:

• W3C 선택기 사양
• Mozilla/Firefox 지원 선택기
• 크로스 브라우저, CSS3 지원 표

:empty선택기는 입력 값이 아닌 하위 노드에서만 작동합니다.
[value=""][value=""]可以工作；但仅适用于初始状态。这是因为CSS所看到的节点的value属性与节点的value는 작동할 수 있지만 초기

상태에서만 가능합니다. 이는 CSS에 표시된 노드의 값

property이 노드의 값property(사용자 또는 DOM JavaScript에 의해 변경되고 양식 데이터로 제출됨)과 다르기 때문입니다. .

초기 상태에만 관심이 있는 것이 아니라면

사용자 스크립트나 Greasemonkey 스크립트를 사용해야 합니다. 다행히 어렵지는 않아요. 다음 스크립트는 Chrome, Greasemonkey 또는 Scriptish가 설치된 Firefox 또는 사용자 스크립트를 지원하는 모든 브라우저(예: IE를 제외한 대부분의 브라우저)에서 작동합니다.

🎜이 jsBin 페이지🎜🎜에서 CSS 제한 사항 및 JavaScript 솔루션 데모를 확인하세요. 🎜 으아아아