有沒有一種簡單的方法來選擇所有的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>