CSS选择文本输入字段?

我如何能目标输入字段类型的“文本”使用CSS选择器?

504913 次浏览
input[type=text]

或者,限制表单内的文本输入

form input[type=text]

或者,进一步限制为某种形式,假设它的id为myForm

#myForm input[type=text]

注意:这是IE6不支持的,所以如果你想为IE6开发,要么使用IE7.js(正如Yi Jiang建议的那样),要么开始在所有文本输入中添加类。

参考:http://www.w3.org/TR/CSS2/selector.html#attribute-selectors


因为它是指定的默认属性值可能并不总是可以用属性选择器选择,可以尝试覆盖其他情况下的标记,其中文本输入呈现:

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' */

当类型已经定义,但有一个无效值,并且仍然回落到type="text"时,这种情况仍然存在。为了解决这个问题,我们可以使用选择所有不是其他已知类型之一的输入

input:not([type=button]):not([type=password]):not([type=submit])...

但是这个选择器将是相当荒谬的,而且可能的类型列表正在随着添加到HTML的新功能而增长。

注意::not伪类仅从IE9开始支持。

你可以在这里使用属性选择器:

input[type="text"] {
font-family: Arial, sans-serif;
}

这在IE7及以上版本中得到支持。如果你需要支持IE6,你可以使用IE7.js来添加对它的支持。

更多信息请参见:http://reference.sitepoint.com/css/attributeselector

我通常在我的主样式表中使用选择器,然后制作一个ie6特定的.js (jquery)文件,该文件将一个类添加到所有输入类型中。例子:

$(document).ready(function(){
$("input[type='text']").addClass('text');
)};

然后使用类在ie6特定的样式表中复制我的样式。这样,实际的标记会更简洁一些。

你可以使用:text Selector来选择所有文本类型的输入

工作提琴

$(document).ready(function () {
$(":text").css({    //or $("input:text")
'background': 'green',
'color':'#fff'
});
});

:text是一个jQuery扩展,不是CSS规范的一部分,使用:text的查询不能利用原生DOM querySelectorAll()方法提供的性能提升。为了在现代浏览器中获得更好的性能,请改用[type="text"]。这将适用于IE6+

$("[type=text]").css({  // or $("input[type=text]")
'background': 'green',
'color':'#fff'
});

CSS

[type=text] // or input[type=text]
{
background: green;
}

正如@Amir上面所写的,现在最好的方法——跨浏览器,抛弃IE6——就是使用

[type=text] {}

到目前为止,还没有人提到更低的CSS特异性(为什么 重要的?), [type=text] 特性 0,0,1,0而不是input[type=text]的0,0,1,1。

就性能而言,再也没有负面影响了。

normalize v4.0.0刚刚发布了选择器特异性降低

我有输入类型文本字段在一个表行字段。我用代码瞄准它

.admin_table input[type=text]:focus
{
background-color: #FEE5AC;
}

使用属性选择器,我们的目标是CSS中的输入类型文本

input[type=text] {
background:gold;
font-size:15px;
}

属性选择器通常用于输入。这是属性选择器的列表:

< p >[标题] 所有具有title属性的元素都被选中 < p > (title =香蕉)

.所有title属性值为banana的元素 < p >[标题~ =香蕉) title属性值中包含'banana'的所有元素 < p >[标题| =香蕉) title属性值以'banana'开头的所有元素 < p >[标题^ =香蕉) title属性值以'banana'开头的所有元素 < p >(标题=美元香蕉) title属性值以'banana'结尾的所有元素 < p >(标题* =香蕉) title属性值包含子字符串'banana'的所有元素

参考:https://kolosek.com/css-selectors/

输入(type =文本)

这将选择网页中所有的输入类型文本。