如何使用 CSS 定位文本输入字段？

Posted 2023-03-05

【中文标题】如何使用 CSS 定位文本输入字段？

【英文标题】：How can I target text input fields with CSS?

【发布时间】：2013-07-15 23:43:37

【问题描述】：

假设您有以下 html：

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

当然，在我的 HTML 中，我也会有其他类型的输入字段（复选框等）。现在我只想设置文本输入的样式。

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

input[type=text]  background: red; 

对于第二个输入，该属性显式存在，这是有效的。然而，对于第一个，它适用于 IE8，但不适用于 IE10。也不在 Chrome 中。

那么我怎样才能定位所有文本输入字段，并且只定位文本输入字段，而不必将type=text 放在任何地方？

您可以在jsFiddle 中看到这一点。对于 IE8，请查看 these instructions 了解如何让 jsFiddle 工作，但它看起来像这样：

【参考方案1】：

如果您希望能够省略 type="text" 并且仍然有选择器匹配，则必须使用 CSS3 中提供的 not psuedoselector：

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

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

这在较低版本的 IE 中不起作用，因为这些浏览器不支持 CSS3。

最好的解决方案是检查并将type="text" 添加到您的文本输入中，然后使用您原来的选择器。

【讨论】：

哦，但是 :not so 不能在 Netscape 或 IE 6 及更早版本上运行... :-)

@rodrigo-silveira lifehacker.com/5925287/…:P

一个关于让 css3 选择器在 IE 下工作的有趣线程>=7：***.com/questions/3077146/…

太好了，不知道/记得not。这允许我只为文本输入元素指定样式，而不必为所有其他输入元素设置例外。

【参考方案2】：

一种痛苦但确实可行的方法是简单地设置样式

input 
    /* ... */

这将针对每个浏览器中的文本输入，然后您可以做您正在做的事情，并针对不是文本输入的每一种输入类型：

input[type=range] 
input [type=phone] 
// etc.

这样，即使浏览器不支持 CSS3 中可用的 :not 运算符，您仍然可以让它工作...

【讨论】：

这可行，但有点相反。就我而言，我认为这需要大量的工作，因为对于每种类型的输入，我都必须做出例外。虽然我想做的只是设置文本输入元素的样式。

【参考方案3】：

我的建议是输入的默认样式是

input 
    background-color: red;

然后根据需要覆盖其他样式的样式，例如蓝色按钮

input[type='button'] 
    background-color: blue;

当然，您需要为特定的输入类型指定特定的样式，但这并不意味着您无论如何都不会这样做，例如，如果您想要一个独特的按钮。

【讨论】：

正如您所提到的，这将是很多工作。虽然我只想设置输入文本元素的样式，但在这里我必须为所有其他元素类型设置例外。

是的，jbabey 的回答比我的要好得多。我真的需要及时了解我的 CSS XD

【参考方案4】：

使用类和 CSS 设置输入样式：

.redBG

    background: red;

那么你的 HTML 是：

<input class="redBG" />

附jsFiddle。

【讨论】：

@Brewal 我的想法是可能需要不止一种风格......我可能选错了！

这种方法的缺点是，如果您想在整个网站上获得某种外观，您必须将类添加到所有输入元素中。所以对于我的场景，不是很合适。

@Peter 我不确定 - 但确定这是其他人将来可能需要的替代方案 :)