用於綁定到輸入的標籤的CSS選擇器

在CSS中選擇label的綁定到input的字段（通過for屬性）是否有required屬性集？喜歡的東西：用於綁定到輸入的標籤的CSS選擇器

label:input[required] { 
    ... 
}

目前，我加入class="required"標籤和輸入的造型。我現在在所需的輸入字段中具有HTML5屬性required="required"。這將是很好的刪除冗餘類的屬性。

的closest answer我發現不使用label元素的for屬性，但將要求label直接相鄰的HTML輸入。

來源

2010-01-16 Ted Bergeron

CSS 2 Attribute Selectors 如何在瀏覽器中兼容。

實施例：

<style> 
label[required=required] 
{ 
color: blue; 
} 
</style> 
<label required="required" for="one">Label:</label><input name="one" id="one" />

還檢查this出來。

來源

2010-01-18 21:50:31 Tom

顯然問題和答案使用格式，但註釋不。該建議的問題是所需的屬性屬於輸入元素，而不是標籤元素。 <標籤= 「電子郵件」> E-mail地址： <輸入的ID = 「電子郵件」類型= 「電子郵件」名稱= 「電子郵件」需要= 「需要」/>在CSS 另外，最好只是說：輸入，因爲只有有效的標記爲[要求]： HTML - >需要 XHTML - >所需=「需要」所需=「假」或類似的東西是無效的。 – 2010-01-19 05:08:36

另請參閱：http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-required-attribute – 2010-01-19 05:09:27

是啊，required = required是不必要的。但如果他希望能夠將所有標籤標籤附加到具有所需屬性的輸入上，我認爲這是不可能的。你可以得到所有輸入@required'input [required]'，但不是所有的標籤，除非它們是輸入的子節點，即使在HTML中也是不正確的。 – Tom 2010-01-22 12:05:34

此方法適用於大多數現代瀏覽器：

<style> 

label > input[required="required"] { 
    background: red; 
} 

</style> 
<label for="myField"><input required="required" id="myField" /></label>

來源

2012-04-25 13:19:58

我想OP是要求一個一般適用於所有必需元素的選擇器，以避免爲每個元素指定一個選擇器。 – 2012-04-30 22:39:56

如果您使用的是使用標籤/輸入的推薦方式（不是嵌套它們），則這不起作用 – ashwoods 2013-07-11 12:31:46

此方法的另一個問題或標籤+輸入[必需]的問題是您正在設計標籤而不是 – mastaBlasta 2014-03-19 15:34:05

我不認爲這真的可以通過CSS中的OP希望的方式完成的事情。 CSS不會那樣工作。

在我看來，更好的做法是退後一步，看看大局。你有一個表格，其中一些字段是必需的，有些不是。首先爲用戶提供所有必填字段，或將所需字段組合在一起，並使其與可選字段明確分開，這是一種很好的方法。

您可以創建這樣一個結構

<form> 
    <ul class="required_fields"> 
     <li> 
      <label>username</label> 
      <input /> 
     </li> 
     <li> 
      <label>email</label> 
      <input /> 
     </li> 
    </ul 
    <ul class="optional_fields"> 
      ... 
    </ul> 
</form> 

/* CSS */ 
.required_fields label {font-weight: bold} 
.required_fields label:after { content: "*"; color: red } /*more styles for labels*/

有許多的這種方法的好處。您可以輕鬆添加和刪除「必需」組中的項目，而無需逐個修改每個項目。您可以根據需要將「必需」類分配到鏈條上方。如果表單具有「必需」類，則其中的所有內容都會根據需要進行標記。如果您決定將「所需」類別稱爲其他類別，則更改地點的次數會減少。一般而言，這種方法還可以幫助您更好地組織表單。您不應混淆必需和可選字段。

你可以採取這一步，並有一些JavaScript，將注入所需的屬性到輸入字段以及。

$(".required_fields input").each(function(){ 
    this.setAttribute('required', 'required'); 
});

來源

2014-03-19 16:03:37 mastaBlasta

這是一個嚴格的要求，並強制一個特定的設計決定。考慮要求郵寄地址。我們要求地址欄1，城市，州，郵編。您會將地址行2移出流程，因爲它是可選的？人們熟悉郵寄地址的結構，並希望它以標準方式構建。 – 2014-04-03 19:32:38

在這種情況下，地址第2行是例外情況，作爲例外，它應該得到特殊處理。也許是禁用所需樣式的類.not_required。 '.required_fields label.not_required：after {content：「」}'。看起來像是從一般到更具體的完美解決方案。 – mastaBlasta 2014-04-03 20:41:26

用於綁定到輸入的標籤的CSS選擇器

回答

相關問題