Question

鉴于这些不同types的HTML输入：

<input type="text" id="username" />
<input type="email" id="emailaddress" />
<input type="date" id="birthday" />
<input type="password" id="pword" />
<input type="search" id="q" />

是否可以将CSS样式应用于所有文本框，而无需为每个文本框添加类或选择它们，如下所示：

input[type="text"], input[type="email"], input[type="date"], input[type="password"], input[type="search"] ...

此外，我不想使用input { }因为选择单选按钮等，当我只想要样式是文本框时。

Answer 1

无论

input {...}
input[type="radio"] { (undo changes here) }

或

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

虽然后者可能看起来更直接，但请注意并非所有浏览器都支持not语法。

Answer 2

我不认为这是可能的。例如，由浏览器决定如何呈现输入。没有办法查询浏览器如何呈现控件（据我所知）。例如，某些浏览器会将“范围”输入呈现为文本框而不是滑块。另外一些浏览器会将“搜索”控件与其他文本框（圆角等）进行不同的渲染，因此您的CSS可能无法正常运行。

我认为你必须按照你的描述去输入[type =“text”]，input = [type =“password”] {}规则。

有没有办法将CSS应用于所有HTML5文本输入，无论类型属性如何？

2 个答案: