根據僅使用CSS的輸入數據設置文本輸入樣式

查看除Gecko源以外的所有內容後，我對以下行爲感到困惑。我想看看我是否能樣式基於用戶輸入的值的文本輸入，並最終結束了這個CSS：根據僅使用CSS的輸入數據設置文本輸入樣式

input[value="password"] { 
    border:1px solid red; 
}

的問題是，它似乎是一個輸入的值僅在檢查元素創建，如看到in this example。

是否可以在不使用Javascript的情況下完成此操作？爲什麼瀏覽器不會相應地更新樣式？

來源

2011-12-16 Paul Westin III

它不起作用，因爲屬性選擇器「匹配具有在源文檔中定義的某些屬性的元素」（Attribute selectors in CSS 2.1）。事情真的有點複雜，因爲在input元素上調用setAttribute('value','password')會在許多瀏覽器（而不是IE）中導致匹配。但是，如果你不使用JavaScript，這是無關緊要的。

但是，由於瀏覽器的支持有限以及實現方面的複雜性，但目前存在一種間接方式，儘管目前大部分都是理論上的。你可以寫：

<style> 
input:valid { border: 1px solid red; } 
</style> 
<input pattern=password id=x>

這將使用HTML5 pattern屬性，在這種情況下，正則表達式，僅僅是一個固定的字符串沒有通配符和the CSS3 Basic UI:valid僞類，測試是否元素的狀態滿足有效性約束。這不適合正常使用（例如，在IE 9中不支持），但在受控環境中的特殊情況下，這樣的事情可能是可用的。

但是，支持這些功能的瀏覽器往往會有自己的有效性錯誤報告，比如該值無效時圍繞框的特殊顏色，我不認爲您可以在CSS中更改 - JavaScript可能會有所幫助，但是......所以報告可能會與你在這裏的目標發生衝突。此外，支持這些功能的瀏覽器似乎將該元素的狀態視爲有效，當該元素爲空時。這很奇怪，並且試圖解決這個問題，我將輸入強制性的（HTML5屬性required）似乎打開了新的蠕蟲罐，而不是修復。但也許在某些情況下，你可以使用一些初始值，比如value="?"，用戶可以用這個輸入替換。

來源

2011-12-16 06:40:28