CSS Seçici girişi

Question

-required öznitelik kümesi olan (for özelliğiyle) input alanlara bağlı label s seçmek için CSS'deki bir yolu var mı bağlı? şöyle birşey:

label:input[required] { 
    ... 
} 

Şu anda, şekillendirme için etiket ve girişlerine class="required" ekliyorum. Artık gerekli giriş alanlarında HTML5 özniteliği required="required" var. Yedek sınıf özniteliklerini kaldırmak güzel olurdu.

Ben label elementin for özelliğini kullanmaz bulundu, ancak label HTML girişine doğrudan bitişik olmasını gerektirecektir closest answer

.

Answer 1

Nasıl hakkında CSS 2 Attribute Selectors Tarayıcılar arasında oldukça uyumludur.

Örnek:

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

da this out.

Answer 2

Bu çözüm en modern tarayıcılarda çalışır:

<style> 

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

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

Answer 3

bu gerçekten OP istediği şekilde CSS yoluyla yapılmasıdır sanmıyorum. CSS bu şekilde çalışmıyor.

Görüşüme göre daha iyi bir yaklaşım geri adım atmak ve büyük resme bakmaktır. Bazı alanların gerekli olduğu ve bazılarının bulunmadığı bir formunuz var. Kullanıcının önce gerekli tüm alanları vermesi veya gerekli alanları bir araya getirmesi ve onları isteğe bağlı alanlardan açıkça ayırması iyi bir yaklaşımdır.

Bu yaklaşıma faydaları vardır

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

gibi bir yapı oluşturabilir. Her birini tek tek değiştirmek zorunda kalmadan 'gerekli' gruptan öğeleri ekleyebilir ve kaldırabilirsiniz. 'Gerekli' sınıfı istediğiniz kadar zincir atayabilirsiniz. Formun 'gerekli' sınıfı varsa, içindeki her şey gerektiği gibi etiketlenir. 'Gerekli' sınıfın başka bir şey çağrılmasına karar verdiyseniz, değişiklik yapmak için daha az yer vardır. Ve genel olarak bu yaklaşım, formlarınızı daha iyi organize etmenize de yardımcı olur. Gerekli ve isteğe bağlı alanları karıştırmamalısınız.

Bunu bir adım daha ileri alabilir ve gerekli özniteliği giriş alanlarına da enjekte edecek bir javascript alabilirsiniz.

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