問題描述
如何使用 CSS 選擇器定位文本"類型的輸入字段?
input[type=text]
或者,限制表單內的文本輸入
表單輸入[type=text]
或者,進一步限制為某種形式,假設它具有 id myForm
#myForm input[type=text]
注意:IE6 不支持此功能,因此如果您想為 IE6 開發,請使用 IE7.js(如 Yijiang 建議的那樣)或開始為所有文本輸入添加類.p>
參考:http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
因為規定默認屬性值不能始終可以使用屬性選擇器進行選擇,可以嘗試覆蓋其他文本輸入的標記情況:
input:not([type]),/* 標記中不存在類型屬性 */input[type=""],/* 類型屬性存在,但為空 */input[type=text]/* 類型被明確定義為'text' */
這仍然會在定義類型但具有無效值并且仍回退到 type=text"時的情況.為了涵蓋這一點,我們可以使用選擇不是其他已知類型之一的所有輸入
input:not([type=button]):not([type=password]):not([type=submit])...
但是這個選擇器會很荒謬,而且 列表可能的類型隨著向 HTML 添加新功能而不斷增長.
注意::not
偽類 只支持從 IE9 開始.
How can I target input fields of type 'text' using CSS selectors?
input[type=text]
or, to restrict to text inputs inside forms
form input[type=text]
or, to restrict further to a certain form, assuming it has id myForm
#myForm input[type=text]
Notice: This is not supported by IE6, so if you want to develop for IE6 either use IE7.js (as Yi Jiang suggested) or start adding classes to all your text inputs.
Reference: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
Because it is specified that default attribute values may not always be selectable with attribute selectors, one could try to cover other cases of markup for which text inputs are rendered:
input:not([type]), /* type attribute not present in markup */
input[type=""], /* type attribute present, but empty */
input[type=text] /* type is explicitly defined as 'text' */
Still this leaves the case when the type is defined, but has an invalid value and that still falls back to type="text". To cover that we could use select all inputs that are not one of the other known types
input:not([type=button]):not([type=password]):not([type=submit])...
But this selector would be quite ridiculous and also the list of possible types is growing with new features being added to HTML.
Notice: the :not
pseudo-class is only supported starting with IE9.
這篇關于文本輸入字段的 CSS 選擇器?的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,也希望大家多多支持html5模板網!