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

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 :-입력 요소에 필수 속성 추가

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

css: - use :invalid selector

input.my-input-element:invalid {

}

Notes:

• value in the input element is not needed.
• About required from w3Schools.com, "When present, it specifies that an input field must be filled out before submitting the form."

---

This question might have been asked some time ago, but as I recently landed on this topic looking for client-side form validation, and as the :placeholder-shown support is getting better, I thought the following might help others.

Using Berend idea of using this CSS4 pseudo-class, I was able to create a form validation only triggered after the user is finished filling it.

Here is ademo and explanation on CodePen: https://codepen.io/johanmouchet/pen/PKNxKQ

---

I'm wondered by answers we have clear attribute to get empty input boxes, take a look at this code

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

UPDATE

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

More over for having a great look in the validation

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

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

참고URL : https://stackoverflow.com/questions/3617020/matching-an-empty-input-box-using-css