html中的文本字段怎么打字,html - 文本输入字段的CSS选择器？

html - 文本输入字段的CSS选择器？

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

9个解决方案

615 votes

input[type=text]

或者，限制表格内的文字输入

form input[type=text]

或者，进一步限制某种形式，假设它具有id :not

#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伪类。

Alin Purcaru answered 2019-01-10T16:40:50Z

36 votes

您可以在此处使用属性选择器：

input[type="text"] {

font-family: Arial, sans-serif;

}

IE7及更高版本支持此功能。 如果需要支持IE6，可以使用IE7.js添加对此的支持。

有关详细信息，请参阅：[http://reference.sitepoint.com/css/attributeselector]

Yi Jiang answered 2019-01-10T16:41:26Z

13 votes

我通常在主样式表中使用选择器，然后创建一个ie6特定的.js(jquery)文件，为所有输入类型添加一个类。 例：

$(document).ready(function(){

$("input[type='text']").addClass('text');

)};

然后使用类在ie6特定样式表中复制我的样式。 这样实际的标记有点清洁。

garrettwinder answered 2019-01-10T16:41:58Z

6 votes

您可以使用: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;

}

Aamir Shahzad answered 2019-01-10T16:42:31Z

1 votes

我在表行字段中输入了类型文本字段。 我用代码来定位它

.admin_table input[type=text]:focus

{

background-color: #FEE5AC;

}

Amit Mhaske answered 2019-01-10T16:42:55Z

0 votes

正如@Amir上面发布的那样，现在最好的方式 - 跨浏览器并留下IE6 - 就是使用

[type=text] {}

没有人提到较低的CSS特异性(为什么这么重要？)到目前为止，[type=text]的特征是0,0,1,0而不是0,0,1,1与input[type=text]。

在性能方面，不再有任何负面影响。

标准化v4.0.0刚刚发布，选择器特异性降低。

Volker E. answered 2019-01-10T16:43:45Z

0 votes

使用属性选择器，我们在CSS中定位输入类型文本

input[type=text] {

background:gold;

font-size:15px;

}

Santosh Khalse answered 2019-01-10T16:44:09Z

0 votes

输入[类型=文本]

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

Navneet Kumar answered 2019-01-10T16:44:40Z

-1 votes

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

[标题]选择具有title属性的所有元素。

[标题=香蕉]所有具有title属性的'banana'值的元素。

[标题〜=香蕉]在title属性的值中包含'banana'的所有元素。

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

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

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

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

参考：[https://kolosek.com/css-selectors/]

Nesha Zoric answered 2019-01-10T16:45:58Z