是否有一种简洁的方法可以选择所有HTML表单输入元素，而无需重复规则选择器？

在我看来，HTML有一个设计问题，表单输入元素是不一致的

类型（
复选框
，
文本
，等等），或者是它们自己的元素类型（
选择
，
文本区域
，等等）。我知道这是基于元素对子元素的需求而定的（
和
有子元素，但
没有子元素），但不同类型的
会导致非常不同的呈现方式-例如，
复选框和
收音机通常呈现为一个小的可点击方形共享输入，而
文本
和
密码
为矩形，没有规定的宽度

这意味着，如果要设置输入样式，则需要多个规则

鉴于此HTML：

<div class="field">
    <label>
        <input type="checkbox" /> Option 1
    </label>
    <label>
        <input type="checkbox" /> Option 2
    </label>
</div>

<div class="field">
    A question?
    <label>
        <input type="radio" /> Option 1
    </label>
    <label>
        <input type="radio" /> Option 2
    </label>
</div>

<div class="field">
    <label>
        Your name
        <input type="text" />
    </label>
</div>

<div class="field">
    <label>
        An essay
        <textarea></textarea>
    </label>
</div>

但是，这也会（不适当地）设置
收音机
和
复选框
输入的样式，因此您需要设置
输入
的样式，然后为
输入[type=radio]
和
输入[type=checkbox]添加新规则
重新设置样式以匹配您的设计或重置样式-或更改规则以匹配
输入[type=text]

但两者都不是完美的，因为输入规则仍然没有为其他类型的
输入指定样式：要么是模仿文本框的样式（例如
密码
和
电子邮件
），要么不是（
颜色
，
图像
，
文件
，等等）。您需要为您认为可能需要的每种类型添加一条规则-除了所有其他表单元素之外，如
选择
、
文本区域
、
按钮
，等等-然后您需要为每种情况重复这些选择器。在新的上下文中，样式需要不同：

input[type=text],
input[type=password],
input[type=search],
input[type=tel],
input[type=url],
input[type=email],
textarea {
    border: 1px inset green;
}

input[type=radio],
input[type=checkbox] {
    border: none;
}

.someWrapper input[type=text],
.someWrapper input[type=password],
.someWrapper input[type=search],
.someWrapper input[type=tel],
.someWrapper input[type=url],
.someWrapper input[type=email],
.someWrapper textarea {
    border: 1px inset green;
}

.someWrapper input[type=radio],
.someWrapper input[type=checkbox] {
    border: none;
}

/* etc */

然而，我觉得很多输入都可以分为“输入类”，比如“文本输入”类：
文本
，
密码
，
文本区
，
电子邮件
，
搜索
，
框输入”类：
复选框
，
收音机
，“日期”类：
日期
，
日期
，
月份
等

因此，除了手动将这些类作为
class
值添加到我的HTML输入中，是否有任何浏览器固有的方式，例如通过CSS伪类，例如
input:textbox
或
input:boxinput
？如果是这样的话，这将大大简化表单的CSS选择器，并减少因缺少选择器而导致的CSS错误。
幸运的是，CSS中有一些东西几乎可以满足您的需要。
：read-write
psuedo选择器（）选择用户可编辑的元素

考虑以下几点：

<input type="radio" selected /><br/>
<input type="checkbox" selected><br>
<input type="button" value="Click me"><br>
<input type="submit" value="Submit me"><br>
<input type="text"><br>
<input type="password"><br>
<input type="email"><br>
<input type="date"><br>
<textarea></textarea><br>

浏览器对基本表单字段的支持相当好

注：我说的差不多在第一行。这将选择日期字段。
您应该能够只使用
输入[type]
但是，这在应用于
选择
或
文本区域
字段时并不一定有帮助。但无论如何，您都必须添加这些选择器


输入[类型]，
文本区{
边框：1px镶嵌绿色；
}
输入[类型=收音机]，
输入[类型=复选框]{
边界：无；
}
输入[类型]，
文本区{
边框：1px镶嵌绿色；
}
输入[类型=收音机]，
输入[类型=复选框]{
边界：无；
}










您列出的“日期”类将是“文本输入”类的一部分。支持它们的浏览器会添加额外的UI，但它基于标准文本输入字段。另外，不支持新HTML5输入类型的浏览器将把它们全部呈现为默认文本框。但是没有，CSS中没有通用的“文本框类型输入字段”选择器。为什么您甚至需要一个包装器？你不能只创建一个表单字段类，其中所有用户输入都有类
表单字段
？@Adjit是的，但我想知道是否有一种方法可以在不更改HTML的情况下添加额外的
类
属性值。你试过简单的
输入[类型]
@Adjit假设
type
是
上的必需属性，则规则
input
和
input[type]
是等效的（除非您设置了无效HTML的样式）。例如，这无助于区分
和
。这样做的下侧（或上侧）也将针对除输入之外的任何可编辑元素，例如带有可编辑内容的
div
attribute@LGSon幸运的是，这些元素可以首先与
*：read-write:not（input）
-匹配并排除，反之亦然：
input:read-write
（除了
textarea
）。@Dai我很清楚：）。。。我的评论只是为了让大家对贴出的答案有所了解，我不能说为什么我没有在我的评论中添加这一点，所以谢谢…评论upvoted@Dai顺便说一句，这不是一个选项吗
input:not（[type=radio]）：not（[type=checkbox]）{}
。。。虽然我看到我删除了它，但我还是回答了这个问题，并且不能真正说明为什么
input[type]
没有意义，因为所有
元素都定义了
type=“”
属性（当然不包括无效文档）。
<input type="radio" selected /><br/>
<input type="checkbox" selected><br>
<input type="button" value="Click me"><br>
<input type="submit" value="Submit me"><br>
<input type="text"><br>
<input type="password"><br>
<input type="email"><br>
<input type="date"><br>
<textarea></textarea><br>

*:read-write {border:1px solid #f3f;}