Html 通用文本框的CSS选择器

例如，有没有一种方法可以使用CSS选择器选择每种文本框，使它们具有相同的宽度？我所说的文本框，只是指用户可以输入的东西

我的问题是它们太多了。它过去相当直截了当；您只有两种HTML4文本框。这两种类型是

文本

和

密码

，因此CSS可以

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

这将涵盖所有类型。然而，随着HTML5的发明，你会得到更多的类型，比如

数字

，

电子邮件

，

url

，

搜索

和

电话

，它们的外观和行为都是一样的（除了你应该在其中键入的内容），我想通过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'] {...}

是否有一种更高效的代码编写方法？

是否存在更明智的解决方案？

上一堂好的老式时装课怎么样

或重写非文本的类型

input {
    background: red;
}

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

---

此外： 在我看来，你的解决方案并没有什么问题

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

• 颜色
• 日期
• 日期时间
• 日期时间本地
• 电子邮件
• 月
• 数
• 射程
• 搜寻
• 电话
• 时间
• 网址
• 周

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

假设您在相关输入上设置了

占位符

属性，那么您可以使用

输入[占位符]

捕获

文本

、

搜索

、

电话

、

url

或

电子邮件

相反，如果您始终只为有效的文本输入设置

size

或

maxlength

，则您可以在类似简洁的选择器

input[size]

或

input[maxlength]

中捕获

password

以及上面列出的密码

输入[type^=date]

可以捕获所有三个日期

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

这使用

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

）：

伪类适用于任何具有可编辑文本的元素，因此您可以通过将其与

readonly

的属性选择器相结合来实现所需的大部分内容。请注意，

禁用

文本框将不匹配

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

---

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

为什么不简单地

input

然后指定要从默认CSS更改的特定输入类型？该类是一个很好的计划。如果没有其他令人惊讶的精彩解决方案出现，我会接受这个。另一种解决方案“覆盖三种类型…”的问题是，控件的非文本类型远远不止三种。将来可能会定义其他类型的控件，这些控件在本场景中都会变为红色。您还可以反转此逻辑并使用：not reach:

输入：not（[type=radio]，[type=checkbox]，[type=submit]，[type=file]）

好的提示，全部。谢谢不过，我想我还是坚持布罗西的回答。不客气。如果是我，我会选择一个类（正如Blowsie首先指出的那样）（当然，除非我正在为文本输入创建一个“重置”类型样式表）。

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