attribute - CSS를 사용하여 입력에 텍스트가 있는지 검색-방문한 페이지에서 입력을 제어하지 않는 경우?



input is-empty (10)

HTML 코드가 수정 될 수 있는지 여부와 일반적인 CSS주의 사항으로 가능합니다. required 속성을 요소에 추가하면 요소가 일치합니다 :invalid 않거나 :valid 컨트롤의 값이 비어 있는지 여부에 따라 :valid . 요소에 value 특성이 없거나 valuevalue="" 인 경우 컨트롤의 값은 처음에는 비어 있고 문자 (공백 포함)가 입력되면 비어 있지 않습니다.

예:

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

pseudo-classed :valid:invalid 는 작업 초안 수준의 CSS 문서에서만 정의되지만 IE에서는 IE 10과 함께 제공된다는 점을 제외하고는 브라우저에서 광범위한 지원이 이루어집니다.

공백으로만 구성된 "빈"포함 값을 만들려면 속성 pattern=.*\S.* 추가 할 수 있습니다.

입력 컨트롤에 비어 있지 않은 값이 있는지 여부를 직접 감지하는 CSS 선택기가 (현재) 없으므로 위에서 설명한 것처럼 간접적으로해야합니다.

일반적으로 CSS 선택기는 마크 업을 참조하거나 경우에 따라 사용자 작업이 아닌 스크립팅 (클라이언트 측 JavaScript)으로 설정된 요소 속성을 참조합니다. 예를 들어, :empty 는 마크 업에서 빈 내용으로 요소를 찾습니다. 이러한 의미에서 모든 input 요소는 어쩔 수없이 비어 있습니다. selector [value=""] 는 요소가 태그에 value 속성을 갖고 있는지 여부를 테스트하고 빈 문자열을 값으로 갖습니다. 그리고 :checked:indeterminate 는 비슷한 것입니다. 실제 사용자 입력의 영향을받지 않습니다.

https://ffff65535.com

CSS를 통해 입력에 텍스트가 있는지 여부를 감지하는 방법이 있습니까? :empty pseudo-class를 사용해 보았는데, [value=""] 사용해 보았습니다. 어느 쪽도 효과가 없었습니다. 나는 이것에 대한 하나의 해결책을 찾지 못하고있다.

나는 우리가 pseudo-class를 가지고 있다고 가정 할 때 이것이 가능해야만한다고 상상한다 :checked , :indeterminate , 둘 다 비슷한 일이다.

참고 : 자바 스크립트를 사용할 수없는 '세련된'스타일을 위해이 작업을 수행하고 있습니다.

또한 Stylish는 사용자가 제어하지 않는 페이지에서 클라이언트 쪽에서 사용됩니다.


JS 및 CSS 사용 : 가상 클래스가 아닙니다.

 input {
        font-size: 13px;
        padding: 5px;
        width: 100px;
    }

    input[value=""] {
        border: 2px solid #fa0000;
    }

    input:not([value=""]) {
        border: 2px solid #fafa00;
    }
<input type="text" onkeyup="this.setAttribute('value', this.value);" value="" />

   


간단한 CSS :

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

이 코드는 입력이 채워지면 주어진 CSS를 적용 할 것입니다.


기본적으로 모두가 찾고있는 것은 :

적게:

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;}
}

순수한 CSS :

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[value='']

input[value=''] {
    background: red;
}

위 필드에서 required 필드없이 작성된 placeholder 트릭을 사용할 수 있습니다.

required 문제는 여러분이 무언가를 작성한 다음 삭제 한 것입니다. 입력 내용이 HTML5 사양의 일부로 항상 빨간색으로 표시됩니다. 그런 다음 위에 수정 된 / 덮어 쓰기 할 CSS가 필요합니다.

당신은 w / o가 required 일을 간단하게 할 수 있습니다.

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

CSS

#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;
}

코드 펜 : https://codepen.io/arlevi/pen/LBgXjZ


자리 표시 자의 스타일을 지정하여 입력에 텍스트가 있는지 여부에 따라 input[type=text] 스타일을 다르게 지정할 수 있습니다. 현재 공식적인 표준은 아니지만 다른 접두사를 사용하여 브라우저를 지원합니다.

input[type=text] {
    color: red;
}
input[type=text]:-moz-placeholder {
    color: green;
}
input[type=text]::-moz-placeholder {
    color: green;
}
input[type=text]:-ms-input-placeholder {
    color: green;
}
input[type=text]::-webkit-input-placeholder {
    color: green;
}

예 : http://fiddlesalad.com/scss/input-placeholder-css


유효한 셀렉터 가 트릭을 수행합니다.

<input type="text" class="myText" required="required" />

.myText {
    //default style of input
}
.myText:valid {
    //style when input has text
}

세련된 CSS는 이것을 할 수 없기 때문에 이것을 할 수 없습니다. CSS에는 <input> 값에 대한 (의사) 선택자가 없습니다. 만나다:

:empty 셀렉터는 입력 값이 아닌 자식 노드만을 참조합니다.
[value=""] 작동 함. 그러나 초기 상태에 대해서만. 이는 노드의 value 속성 (CSS에 표시됨)이 노드의 value 속성 (사용자 또는 DOM 자바 스크립트에 의해 변경되고 양식 데이터로 제출 됨)과 동일하지 않기 때문입니다.

초기 상태 만 신경 쓰지 않으면 userscript 또는 Greasemonkey 스크립트를 사용해야합니다 . 다행히도 이것은 어렵지 않습니다. 다음 스크립트는 Chrome이나 Greasemonkey 또는 Scriptish가 설치된 Firefox 또는 userscripts를 지원하는 모든 브라우저 (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";
}

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

input[value=""]

작동합니다 :-)

편집 : http://jsfiddle.net/XwZR2/





stylish