अलग सीएसएस इनपुट

Question

लेबल करने के लिए मैं दोनों इनपुट बक्सें साथ के लिए लेबल का इस्तेमाल किया है:

<label for="Username">Username</label> 
<input id="Username" type="text" value=""> 

और चेक बॉक्स/Radioboxes

<label for="Live">System is Live</label> 
<input id="Live" name="Live" type="checkbox" value="false"> 

मुसीबत मैं है कि कैसे मैं अलग सीएसएस निर्दिष्ट करते हैं विभिन्न इनपुट प्रकारों के लिए लेबल के लिए।

तो मैं एक सामान्य लेबल सीएसएस कार्य करें:

label { 
    color: #00a8c3; 
    line-height: 20px; 
    padding: 2px; 
    display: block; 
    float: left; 
    width: 160px; 
} 

मुझे लगता है मैं या तो असंरेखित चेक बॉक्स या बुरी तरह से तैनात बक्सें अंत पाते हैं।

Answer 1

आप उन लेबलों की कक्षाएं जोड़ सकते हैं। उदाहरण के लिए:

<label for="Username" class="textbox-label">Username</label> 
<input id="Username" type="text" value=""> 

<label for="Live" class="checkbox-label">System is Live</label> 
<input id="Live" name="Live" type="checkbox" value="false"> 

फिर कक्षा मूल्यों सीएसएस में उपयोग करें: वैकल्पिक रूप से,

label.textbox-label { 
/*some styles here*/ 
} 

label.checkbox-label { 
/*some styles here*/ 
} 

अगर आप आदानों के बाद लेबल था, तो आप इस तरह का चयन कर सकते हैं:

input[type="text"] + label { 
    /*some styles here*/ 
} 

input[type="checkbox"] + label { 
    /*some styles here*/ 
} 

Answer 2

आप इस तरह अपने सीएसएस चयनकर्ता लिख ​​सकते हैं:

label[for=Username] 
label[for=Live] 

आप भी इस धागे पर एक नजर है हो सकता है:
CSS Selector for selecting an element that comes BEFORE another element?

Answer 3

आप सीएसएस चयनकर्ता लिख ​​सकता है जैसे यह काम करेगा:

label[for=Username]{ /* ...definitions here.../} 

label[for=Live] {/...definitions here... */ }