[css] 내가 방문한 페이지에서 CSS를 사용하여 입력 내용에 텍스트가 있는지 감지합니다.

CSS는 이것을 할 수 없기 때문에 스타일리쉬 는 이것을 할 수 없습니다. CSS에는 <input>값에 대한 (의사) 선택기가 없습니다 . 보다:

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

:empty선택은 자식 노드가 아닌 입력 값을 의미한다.
[value=""] 작동 합니다; 그러나 초기 상태에 대해서만 . 이 노드의 때문입니다 value 속성 (CSS가 보는 것을), 노드의 동일하지 않습니다 value 재산 (사용자 또는 DOM의 자바 스크립트에 의해 변경, 양식 데이터로 제출).

초기 상태 만 신경 쓰지 않으면 사용자 스크립트 또는 Greasemonkey 스크립트 를 사용해야합니다 . 다행히도 이것은 어렵지 않습니다. 다음 스크립트는 Chrome, Greasemonkey 또는 Scriptish가 설치된 Firefox 또는 사용자 스크립트를 지원하는 모든 브라우저 (IE를 제외한 대부분의 브라우저)에서 작동합니다.

이 jsBin 페이지 에서 CSS의 한계와 자바 스크립트 솔루션의 데모를보십시오 .

// ==UserScript==
// @name     _Dynamically style inputs based on whether they are blank.
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var inpsToMonitor = document.querySelectorAll (
    "form[name='JustCSS'] input[name^='inp']"
);
for (var J = inpsToMonitor.length - 1;  J >= 0;  --J) {
    inpsToMonitor[J].addEventListener ("change",    adjustStyling, false);
    inpsToMonitor[J].addEventListener ("keyup",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("focus",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("blur",      adjustStyling, false);
    inpsToMonitor[J].addEventListener ("mousedown", adjustStyling, false);

    //-- Initial update. note that IE support is NOT needed.
    var evt = document.createEvent ("HTMLEvents");
    evt.initEvent ("change", false, true);
    inpsToMonitor[J].dispatchEvent (evt);
}

function adjustStyling (zEvent) {
    var inpVal  = zEvent.target.value;
    if (inpVal  &&  inpVal.replace (/^\s+|\s+$/g, "") )
        zEvent.target.style.background = "lime";
    else
        zEvent.target.style.background = "inherit";
}

답변

<style>
#foo { background: yellow; }
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

<input placeholder="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />

<input onkeyup="this.setAttribute('value', this.value);" />

input[value=""]

input:focus:required{
    &:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
    &:valid,
    &:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}
}

input:focus:required:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
input:focus:required:valid,
input:focus:required:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}

<input type="text" placeholder="filter here" id="mytest" />

#mytest:placeholder-shown {
/* if placeholder is shown - meaning - no value in input */
  border: black 1px solid;
  color: black;
}
#mytest {
  /* placeholder isn't shown - we have a value in input */
  border: red 1px solid;
  color: red;
}

input[value]:not([value=""])