CSS를 사용하여 빈 입력 상자 일치

빈 입력 상자에 스타일을 어떻게 적용합니까? 사용자가 입력 필드에 무언가를 입력하면 스타일이 더 이상 적용되지 않습니다. CSS에서 가능합니까? 나는 이것을 시도했다 :

input[value=""]

필드 만 있으면 required갈 수 있습니다input:valid

#foo-thing:valid + .msg { visibility: visible!important; }      

 <input type="text" id="foo-thing" required="required">
 <span class="msg" style="visibility: hidden;">Yay not empty</span>

jsFiddle에서 라이브 보기

또는 #foo-thing:invalid(@SamGoody의 신용)을 사용하여 무효화

최신 브라우저에서는 :placeholder-shown빈 입력을 타겟팅하는 데 사용할 수 있습니다 (와 혼동하지 말 것 ::placeholder).

input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}

추가 정보 및 브라우저 지원 : https://css-tricks.com/almanac/selectors/p/placeholder-shown/

이 작업을 수행하는 CSS에는 선택기가 없습니다. 속성 선택기는 계산 된 값이 아닌 속성 값과 일치합니다.

JavaScript를 사용해야합니다.

필드 값을 업데이트해도 DOM의 값 속성이 업데이트되지 않으므로 실제로 비어 있지 않은 경우에도 선택기가 항상 필드와 일치합니다.

대신 invalid의사 클래스 를 사용하여 원하는 것을 달성하십시오.

input:required {
  border: 1px solid green;
}
input:required:invalid {
  border: 1px solid red;
}

<input required type="text" value="">

<input required type="text" value="Value">

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

와 일하다:

<input type="text" />
<input type="text" value="" />

그러나 누군가가 타이핑을 시작하자마자 스타일은 바뀌지 않을 것입니다 (JS가 필요합니다).

지원 기존 브라우저가 필요하지 않은 경우의 조합을 사용할 수 있습니다 required, valid하고 invalid.

이 사용에 대한 좋은 점은있다 valid및 invalid의사 요소는 입력 필드의 type 속성을 잘 작동합니다. 예를 들면 다음과 같습니다.

input:invalid, textarea:invalid { 
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

input:valid, textarea:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

<input type="email" name="email" placeholder="john_doe@example.com" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>

참고로 JSFiddle은 다음과 같습니다. http://jsfiddle.net/0sf6m46j/

$('input#edit-keys-1').blur(function(){
    tmpval = $(this).val();
    if(tmpval == '') {
        $(this).addClass('empty');
        $(this).removeClass('not-empty');
    } else {
        $(this).addClass('not-empty');
        $(this).removeClass('empty');
    }
});

jQuery에서. 클래스를 추가하고 CSS로 스타일을 지정했습니다.

.empty { background:none; }

이것은 나를 위해 일했다 :

HTML의 required경우 입력 요소에 속성을 추가하십시오.

<input class="my-input-element" type="text" placeholder="" required />

CSS의 경우 :invalid선택기를 사용 하여 빈 입력을 타겟팅

input.my-input-element:invalid {

}

노트:

• 정보 required로부터 w3Schools.com ". 현재, 그것은 입력 필드 양식을 제출하기 전에 채워 져야 함을 지정하는 경우"

이 질문은 얼마 전에 요청되었을 수도 있지만 최근에 클라이언트 측 양식 유효성 검사를 찾고이 주제에 착수하고 :placeholder-shown 지원 이 향상됨에 따라 다음이 다른 사람들에게 도움이 될 것이라고 생각했습니다.

이 CSS4 의사 클래스를 사용하는 Berend 아이디어를 사용하여 사용자가 채우기를 완료 한 후에 만 ​​트리거되는 양식 유효성 검사를 만들 수있었습니다.

CodePen에 대한 ademo와 설명은 다음과 같습니다. https://codepen.io/johanmouchet/pen/PKNxKQ

IE 또는 Pre-Chromium Edge를 지원하지 않는 것이 행복하다면 (점진적 향상을 위해 이것을 사용하면 좋을 수도 있음) :placeholder-shownBerend가 말한 것처럼 사용할 수 있습니다 . Chrome과 Safari의 경우 공백이 작동하지만 실제로는 비어 있지 않은 자리 표시자가 필요합니다.

*,
 ::after,
 ::before {
  box-sizing: border-box;
}

label.floating-label {
  display: block;
  position: relative;
  height: 2.2em;
  margin-bottom: 1em;
}

label.floating-label input {
  font-size: 1em;
  height: 2.2em;
  padding-top: 0.7em;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

label.floating-label input:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

label.floating-label input+span {
  position: absolute;
  top: 0em;
  left: 0;
  display: block;
  width: 100%;
  font-size: 0.66em;
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: font-size 0.1s ease-in-out, top 0.1s ease-in-out;
}

label.floating-label input:placeholder-shown {
  padding-top: 0;
  font-size: 1em;
}

label.floating-label input:placeholder-shown+span {
  top: 0.3em;
  font-size: 1em;
}

<fieldset>
  <legend>
    Floating labels example (no-JS)
  </legend>
  <label class="floating-label">
    <input type="text" placeholder=" ">
    <span>Username</span>
  </label>
  <label class="floating-label">
    <input type="Password" placeholder=" ">
    <span>Password</span>
  </label>
</fieldset>
<p>
  Inspired by Bootstrap's <a href="https://getbootstrap.com/docs/4.0/examples/floating-labels/">floating labels</a>.
</p>

입력에 클래스 이름을 추가 한 다음 CSS 규칙을 적용했습니다.

<input type="text" name="product" class="product" />

<style>
input[value=""].product {
    display: none;
}
</style>

빈 입력 상자를 얻는 명확한 속성이있는 답변에 궁금합니다.이 코드를 살펴보십시오.

/*empty input*/
input:empty{
    border-color: red;
}
/*input with value*/
input:not(:empty){
    border-color: black;
}

최신 정보

input, select, textarea {
    border-color: @green;
    &:empty {
        border-color: @red;
    }
}

더 이상 검증에서 좋은 모습을 가지고위한

 input, select, textarea {
    &[aria-invalid="true"] {
        border-color: amber !important;
    }

    &[aria-invalid="false"], &.valid {
        border-color: green !important;
    }
}

나는 이것이 매우 오래된 스레드라는 것을 알고 있지만 그 이후로 상황이 조금 바뀌었고 문제를 해결하는 데 필요한 것들의 올바른 조합을 찾는 데 도움이되었습니다. 그래서 내가 한 일을 나누겠다고 생각했습니다.

문제는 채워진 필수 입력과 마찬가지로 선택적 입력에 동일한 CSS를 적용하는 것으로 나타났습니다. CSS는 채워지지 않은 경우에도 선택적 입력에 CSS를 적용한 psuedo 클래스 : valid를 사용했습니다.

이것이 내가 고친 방법입니다.

HTML

<input type="text" required="required">
<input type="text" placeholder="">

CSS

input:required:valid {
    ....
}
input:optional::not(:placeholder-shown){
    ....
}