Question

在我看来，HTML存在设计问题，表单输入元素与type <input /> checkbox，text等select不一致，或者是他们自己的元素类型（textarea，<select>等）。我理解它是基于元素对子元素的需求（<textarea>和<input />有孩子，但<input />没有），但checkbox的不同类型导致了不同的呈现 - 例如，radio和text通常呈现为可点击的小方形共享输入，而password和<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>是矩形的，没有规定的宽度。

这意味着如果您是样式输入，则需要多个规则。

鉴于此HTML：

input,
textarea {
    border: 1px inset green;
}

如果您只想设置文本输入样式，您可能认为只需要：

radio

但是，这也会（不恰当地）设置checkbox和input输入的样式，因此您需要设置input[type=radio]样式，然后为input[type=checkbox]和{添加新规则{1}}要么重新设置它们的样式以匹配您的设计，要么重置其样式 - 或者更改规则以匹配input[type=text]。

但两者都不完美，因为输入规则仍然没有为其他类型的input指定样式：要么是在文本框之后建模的（例如password和email）或那些不是（color，image，file等的人。您需要为您认为可能需要的每种类型添加规则 - 除了select，textarea，button之外的所有其他表单元素，等等on - 然后你需要为每种情况重复这些选择器，在新的上下文中样式需要不同：

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 */

但我觉得很多输入可以分为“输入类”，例如“文本输入”类：text，password，textarea，email， search等 - “框输入”类：checkbox，radio，“日期”类：date，datetime，month等等。

因此，不是手动将这些类作为class值添加到HTML中的输入中，而是有任何浏览器内在的方式，例如通过CSS伪类，例如， input:textbox或input:boxinput？如果是这样，这将极大地简化表单的CSS选择器，并减少缺少选择器的CSS错误。

Answer 1

幸运的是，CSS中有一些东西几乎做你想要的。 @matching_words.length伪选择器（https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write）选择可由用户编辑的元素。

请考虑以下事项：

@count

将使用以下一行CSS选择并突出显示底部5个元素（不包括:read-write s）：

<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>

浏览器支持对于基本表单字段非常有用。

注意：我在第一行说接近。这将选择日期字段。

Answer 2

但是，您应该只能使用input[type]，这在申请select或textarea字段时无效。但无论如何，你都必须添加这些选择器。

input[type],
textarea {
    border: 1px inset green;
}

input[type=radio],
input[type=checkbox] {
    border: none;
}

input[type],
textarea {
    border: 1px inset green;
}

input[type=radio],
input[type=checkbox] {
    border: none;
}

<input type="text"/><br/>
<input type="button" value="click"/><br/>
<input type="checkbox"/><br/>
<input type="radio"/><br/>
<input type="color"/><br/>
<textarea></textarea>

Answer 3

您可以使用类型选择器：

input[type="text"] { }
input[type="email"] { }

等等。检查此https://www.w3schools.com/css/css_attribute_selectors.asp

是否有一种简洁的方法来选择所有HTML表单输入元素而不重复规则选择器？

3 个答案: