CSS를 통해 비어 있지 않은 모든 입력 텍스트에 스타일 적용

Question

CSS3를 통해이 작업을 수행 할 수 있습니까?

var inputs = document.getElementsByTagName("INPUT"); 
for (var i = 0; i < inputs.length; i++) 
{ 
    if (inputs[i].type == "text") 
    { 
     if (inputs[i].value != "") 
     { 
      inputs[i].style.borderBottomColor = '#448aff'; 
     } 
    } 
} 

var textareas = document.getElementsByTagName("TEXTAREA"); 
for (var i = 0; i < textareas.length; i++) 
{ 
    if (textareas[i].value != "") 
    { 
     textareas[i].style.borderBottomColor = '#448aff'; 
    } 
}  

IE10도 지원하지 않습니다.

Answer 1

textarea:valid, 
input:valid { 
    border-bottom-color: #448aff; 
} 

또한 및 required 도스 의사 클래스를 얻을 수 속성 (적어도 하나의 비 공백 문자 만 유효) pattern=".*?\S.*"를 추가해야합니다. :invalid 상태를 사용자 정의 할 수도 있습니다.