빈 입력 상자에 스타일을 어떻게 적용합니까? 사용자가 입력 필드에 무언가를 입력하면 스타일이 더 이상 적용되지 않습니다. 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>또는 #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; }