文本输入字段的CSS选择器？ [英] CSS selector for text input fields?

问题描述

如何使用CSS选择器定位类型为text的输入字段？

解决方案

  input [type = text] 
  
 
 
 
或限制表单内的文本输入
  form input [type = text] 
  
或者，为了进一步限制某种形式， has id  myForm  
  #myForm input [type = text] 
  
 注意：这不是IE6支持的，所以如果你想开发IE6， .js（如Yi Jiang建议）或开始为所有文本输入添加类。 
 
 
 
参考：http://www.w3.org/TR/CSS2/selector.html#attribute-selectors  
 
 
 
 
 
 
由于指定了 ，默认属性值可能不总是可以用属性选择器来选择，可以尝试覆盖其他文本输入的标记的情况：
  input：not（[type]），//标记中不存在类型属性
 input [type =]，//类型属性存在，但是空
输入[ type = text] // type被明确定义为'text'
  
类型已定义，但是具有无效值，并仍然落回type =text。要覆盖我们可以使用选择不是其他已知类型之一的所有输入
 输入：not（[type = button ] ... 
  
但这个选择器会很荒谬，还有可能的类型列表 
 
 
 
 注意： ：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选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！