2016-07-28 15 views
0

これはCSS3で行うことができますか?CSSを介して空ではないすべての入力テキストにスタイルを適用してください

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でもサポートしても構いません。

+2

この[スレッド](http://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css-on-a-page-i)で説明したように-am-visiting-and-do-no)、CSSはこれを行うことはできません。 – Ar4i

答えて

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

はまたとrequired THOS擬似クラスを取得する属性(少なくとも一つの非空白文字でのみ有効)pattern=".*?\S.*"を追加する必要があります。おそらく:invalidの状態もカスタマイズしたいと思うでしょう。

+0

入力に関しては、それは常に "空"であるか、空である(空タグ、空白タグ、空白タグ、空白タグ= Chromeで](http://codepen.io/PhilippeVay/pen/OXEqEg?editors=1000) – FelipeAls

+0

@felipealsどのように今のところ?(私は私の電話にいる)。 – Walf

関連する問題