5

例如，有没有办法使用 CSS 选择器选择每种文本框以赋予它们相同的宽度？通过文本框，我只是指用户可以输入的内容。

我的问题是它们太多了。它曾经相当简单；您只有两种带有 HTML4 的文本框。这两种类型是textand password，所以 CSS 可以是

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

这将涵盖所有类型。然而，随着 HTML5 的发明，您获得了更多类型，例如number、email、和url，它们的外观和行为都相同（除了您应该在其中输入的内容），我想解决它们都通过 CSS 以相同的方式进行。searchtel

绝对有必要写下所有这些吗？

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

是否有更高效的代码编写方式？

4

3 回答 3

5

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

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

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

或覆盖非文本类型

input {
    background: red;
}

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

另外：在我的书中，您的解决方案没有任何问题。

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

  • 颜色
  • 日期
  • 约会时间
  • 本地日期时间
  • 电子邮件
  • 月
  • 数字
  • 范围
  • 搜索
  • 电话
  • 时间
  • 网址
  • 星期
于 2013-05-02T09:03:25.657 回答
1

关于减少选择器的几点思考

使用来自 Mozilla 的信息...

假设您在相关输入上设置了一个属性，placeholder那么您可以捕获text、search、或with 。telurlemailinput[placeholder]

相反，如果您始终设置size或maxlength仅针对它们有效的那些文本输入，那么您可以password在类似简洁的选择器input[size]或input[maxlength].

所有三个日期都可以被input[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）到：

input:not([type]), /* all non-declared types */
input[size], /* text, search, tel, url email, or password */
input[type=number] {
   /* styles */
}
于 2013-05-02T17:22:09.520 回答
1

伪类适用于任何具有可编辑文本的:read-write元素，因此您可以通过将其与readonly. 请注意，disabled文本框不会被匹配。

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

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

于 2017-04-24T19:23:15.207 回答