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

Question

HTML有一个设计问题，我认为，由此形式输入元件是不一致type<input />（checkbox，text等）或都是自己的单元类型（select，textarea等）的。我知道它是基于元素对子元素的需求与否（<select>和<textarea>有孩子，但<input />没有），但不同类型的<input />会导致截然不同的呈现效果 - 例如，checkbox和radio通常呈现为一个小的可点击的平方共享输入，而text和password是没有指定宽度的矩形。

这意味着如果你是造型输入，你会需要需要多重规则。

鉴于此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> 

如果你想样式仅文本输入框，你可能会认为你只需要：

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

然而，这也将（不当）样式的radio和checkbox输入，因此您需要输入input的样式，然后为input[type=radio]和input[type=checkbox]添加新规则，以重新设计它们以匹配您的设计或重新设置其风格 - 或更改rul e匹配input[type=text]。

但也不是完美的，因为输入规则仍然没有对其他类型的input指定样式：这些文本框为蓝本（如password和email），或那些没有（color，image，file等）。除了所有其他表单元素（例如select，textarea，button等）外，您还需要为每种类型添加一条规则，然后您需要重复这些选择器每种情况下，风格需要在一个新的环境不同：

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

你可以使用类型选择：

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

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

Answer 2

幸运的是，有一些在CSS中，近做你想做的。:read-write伪选择器（https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write）选择用户可编辑的元素。

考虑以下几点：

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

底部5个元素（不包括br多个）将被选择并与CSS的下面一条线强调：

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

浏览器支持还算不错基本的表单域。

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

Answer 3

你应该能够只使用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>