文本输入字段的CSS选择器?


Answers:


674
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中添加新功能,可能的类型列表也在不断增加。

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


41
+1引用的实际标准,而随后的一些教程的网站
森那维达斯

7
谢谢。我注意到人们引用了Google ...或w3schools上弹出的第一件事。
Alin Purcaru 2010年

是啊,这是一种恼人的
森那维达斯

可以在IE6中使用吗?对于跨浏览器的解决方案,我倾向于添加类(.input-text,.input-submit等),它对于html开发很烂,但是它使CSS和javascript更好了。
zzzzBov

1
@MubasharAhmad我已经更新了答案,并且您可以看到只有在以IE9以上的浏览器为目标的情况下,才有解决方法。
Alin Purcaru 2013年


14

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

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

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


那非常慢
Hidayt Rahman '18

8

您可以使用:text选择器来选择所有带有文本类型的输入

工作小提琴

$(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;
}



0

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

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


-1

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

[title]选中所有具有title属性的元素。

[title = banana]所有具有title属性的“ banana”值的元素。

[title〜= banana]所有在title属性值中包含“ banana”的元素。

[title | = banana]标题属性值以'banana'开头的所有元素。

[title ^ = banana]标题属性值以'banana'开头的所有元素。

[title $ = banana]标题属性值以'banana'结尾的所有元素。

[title * = banana]标题属性值包含子字符串'banana'的所有元素。

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.