如何使用CSS定位文本输入字段？ [英] How can I target text input fields with CSS?

问题描述

假设您有以下HTML：

 < input / 
< br /> 
< input type = text /> 
  

当然，在我的HTML中，我还有其他类型的输入字段）。

我在搜索时发现，在CSS中执行以下操作：

  input [type = text] {background：red; } 
  

对于第二个输入，属性明确存在，对于第一个但是，它工作在IE8，但不是在IE10。也不在Chrome中。

那么如何定位所有文本输入字段，只有文本输入字段，而不必放置 type =

您可以在

这在IE的较低版本中不起作用，因为CSS3在这些浏览器中得不到很好的支持。 / p>

最好的解决办法是在文本输入中加入 type =text原始选择器。

Say you have the following HTML:

<input />
<br />
<input type=text />

Of course, in my HTML I'll have other type of input fields as well (checkboxes, etc). Now I want to style the text inputs only.

What I find when searching, is to do the following in CSS:

input[type=text] { background: red; }

For the second input, where the attribute is explicitly present, this works. For the first however, it works in IE8, but not in IE10. Also not in Chrome.

So how can I target all text input fields, and only the text input field, while not having to put type=text everywhere?

You can see this in a jsFiddle. For IE8, check out these instructions on how to get jsFiddle to work, but it looks like this:

解决方案

If you want to be able to omit the type="text" and still have the selector match, you will have to use the not psuedoselector available in CSS3:

input[type="text"], input:not([type]) {
    ...
}

http://jsfiddle.net/dByqP/5/

This will not work in lower versions of IE, as CSS3 is not well supported in those browsers.

The best solution would be to go through and add type="text" to your text inputs and just use your original selector.

这篇关于如何使用CSS定位文本输入字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！