一般文本框的CSS选择器

Question

有没有办法用CSS选择器选择各种文本框，例如为它们提供相同的宽度？通过文本框，我只是指用户可以键入的内容。

我的问题是它们中有这么多。它过去相当简单;你只有2种类型的HTML4文本框。这两种类型是text和password，因此CSS可能是

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

这将涵盖所有类型。但是，通过HTML5的发明，您可以获得更多类型，例如number，email，url，search和tel行为相同（除了你应该输入的内容），我想通过CSS以相同的方式解决它们。

是否绝对有必要写下这一切？

input:not([type]),
input[type='text'],
input[type='password'],
input[type='number'],
input[type='email'],
input[type='url'],
input[type='search'],
input[type='tel'] {...}

是否有更多代码编写方式可以写这个？

Answer 1

是否存在更合理的解决方案？

一个好的旧时尚课怎么样？

<input class='text' type='text'>

或覆盖非文字的类型

input {
    background: red;
}

input[type=radio], input[type=checkbox], input[type=submit] {
    background: yellow;
}

---

此外： 在我的书中，你的解决方案没有什么问题。

您只需添加新的html5输入类型：

• 颜色
• 日期
• 日期时间
• 日期时间本地
• 电子邮件
• 月
• 号
• 范围
• 搜索
• 电话
• 时间
• URL
• 周

Answer 2

关于减少选择者的一些想法

Using information from mozilla...

假设您在相关输入上设置了placeholder属性，那么您可以捕获text，search，tel，url或{{1}与email。

相反，如果您始终只为那些有效的文字输入设置input[placeholder]或size，那么您可以在类似的简洁选择器中maxlength以及上面列出的那些输入password 1}}或input[size]。

input[maxlength]可以捕获所有三个日期。

类型匹配选择器的最低分母

这会使用input[type^=date]将总数减少到9（目前），但size可能是首选，或maxlength在这种情况下需要添加额外的placeholder做十：

input[type=password]

如果您只关注问题中提到的八种类型，那么它会进一步减少（假设它们被input:not([type]), /* all non-declared types */ input[size], /* text, search, tel, url email, or password */ input[type^=date], /* date, datetime, datetime-local */ input[type=color], input[type=week], input[type=month], input[type=time], input[type=number], input[type=range] { /* styles */ } 或可选size替换为下面的maxlength）：

size

Answer 3

:read-write伪类适用于具有可编辑文本的任何元素，因此您可以通过将其与readonly的属性选择器相结合来实现您想要的大部分功能。请注意，disabled文本框不会匹配。

:read-write {
   /* Your styles here */
}
:-moz-read-write {
   /* Your styles here */
}
[readonly] {
   /* Your styles here */
}

您必须使用单独的块而不是逗号分隔的选择器，因为不了解伪类的浏览器将忽略整个规则。