2016-07-28 66 views
0

這可以通過CSS3完成嗎?通過CSS將所有輸入文本的樣式應用於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; 
} 

還需要添加pattern=".*?\S.*"(僅適用於有至少一個非空格字符)和required屬性得到茨艾倫僞類。您可能也想要自定義:invalid狀態。

+0

關於輸入,它總是「空的」或與之類似的:空(空標籤,帶有開始和結束標籤,中間沒有文本,甚至不是空白=> [您的代碼既不能在Firefox中運行也不能在Chrome瀏覽器](http://codepen.io/PhilippeVay/pen/OXEqEg?editors=1000) – FelipeAls

+0

@felipeals現在怎麼樣?(我在我的手機上。) – Walf