चेकबॉक्स और उनके लेबल को लगातार क्रॉस-ब्राउज़र कैसे संरेखित करें

Question

यह मामूली सीएसएस समस्याओं में से एक है जो मुझे लगातार परेशान करती है। स्टैक ओवरफ्लो के आसपास के लोगों को लंबवत संरेखित checkboxesऔर उनके labelsलगातार क्रॉस-ब्राउज़र कैसे करते हैं? जब भी मैं उन्हें सफ़ारी (आमतौर vertical-align: baselineपर input) में सही ढंग से संरेखित करता हूं , वे फ़ायरफ़ॉक्स और IE में पूरी तरह से बंद हो जाते हैं। फ़ायरफ़ॉक्स में इसे ठीक करें, और सफारी और IE अनिवार्य रूप से गड़बड़ कर रहे हैं। मैं इस पर समय बर्बाद करता हूं हर बार मैं एक फॉर्म को कोड करता हूं।

यहाँ मानक कोड है जिसके साथ मैं काम करता हूं:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

मैं आमतौर पर एरिक मेयर के रीसेट का उपयोग करता हूं, इसलिए फार्म तत्व ओवरराइड के अपेक्षाकृत साफ हैं। आगे कोई भी टिप्स या ट्रिक्स जो आपको देनी है!

Comments

प्रत्येक चेकबॉक्स और लेबल को <li> तत्व के भीतर रखें। ओवरफ़्लो जोड़ें: <li> के लिए छिपा हुआ है और लेबल और चेकबॉक्स को छोड़ दिया है। फिर वे सभी पूरी तरह से ठीक हो गए। स्पष्ट रूप से लेबल तत्व के भीतर चेकबॉक्स न रखें।

— खंड एक

मैंने इसका उपयोग करके heightऔर line-heightविशेषताओं के आधार पर इसे प्राप्त कर लिया है, jsfiddle.net/wepw5o57/3

— TheGr8_Nik

के साथ हेरफेर positionऔर topइस समस्या को हल करेगा उदाहरण: jsfiddle.net/ynkjc22s

— Profesor08

2019. अभी भी वही मुद्दा है। अभी भी इसे काम करने के लिए कुछ हैक्स की जरूरत है :(

— डायटर

@dieter मेरा उत्तर देखें, मैंने बताया है कि हैक की आवश्यकता क्यों होती है और कौन सा दृष्टिकोण हैक नहीं होता है: stackoverflow.com/a/56558431/3995261

— YakovL

Answer 1

मार्कअप की विभिन्न शैलियों को ट्विक करने, परीक्षण करने और प्रयास करने के एक घंटे के बाद, मुझे लगता है कि मेरे पास एक सभ्य समाधान हो सकता है। इस विशेष परियोजना की आवश्यकताएं थीं:

1. इनपुट्स अपनी लाइन पर होने चाहिए।
2. चेकबॉक्स इनपुट को सभी ब्राउज़रों के समान लेबल टेक्स्ट के साथ लंबवत रूप से संरेखित करने की आवश्यकता है (यदि पहचान नहीं है)।
3. यदि लेबल पाठ लपेटता है, तो इसे इंडेंट किया जाना चाहिए (ताकि चेकबॉक्स के नीचे कोई रैपिंग न हो)।

इससे पहले कि मैं किसी भी स्पष्टीकरण में शामिल हो जाऊं, मैं आपको केवल कोड दूंगा:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

यहाँ JSFiddle में काम करने का उदाहरण है ।

यह कोड मानता है कि आप एरिक मेयर की तरह एक रीसेट का उपयोग कर रहे हैं जो इनपुट मार्जिन और पैडिंग को ओवरराइड नहीं करता है (इसलिए इनपुट सीएसएस में मार्जिन और पेडिंग रीसेट डाल रहा है)। स्पष्ट रूप से एक जीवित वातावरण में, आप शायद अन्य इनपुट तत्वों का समर्थन करने के लिए सामानों को घोंसले के शिकार / ओवरराइडिंग करेंगे, लेकिन मैं चीजों को सरल रखना चाहता था।

ध्यान देने योग्य बातें:

• *overflowघोषणा एक इनलाइन आईई हैक (स्टार संपत्ति हैक) है। IE 6 और 7 दोनों इसे नोटिस करेंगे, लेकिन सफारी और फ़ायरफ़ॉक्स इसे ठीक से अनदेखा करेंगे। मुझे लगता है कि यह सीएसएस मान्य हो सकता है, लेकिन आप अभी भी सशर्त टिप्पणियों से बेहतर हैं; बस सादगी के लिए इसका इस्तेमाल किया।
• जैसा कि सबसे अच्छा मैं बता सकता हूं, एकमात्र vertical-alignकथन जो कि ब्राउज़रों के अनुरूप था vertical-align: bottom। इसे स्थापित करने और फिर अपेक्षाकृत ऊपर की ओर की स्थिति सफारी, फ़ायरफ़ॉक्स और IE में लगभग एक पिक्सेल या विसंगति के दो के साथ ही समान रूप से व्यवहार किया।
• संरेखण के साथ काम करने में मुख्य समस्या यह है कि IE इनपुट तत्वों के आसपास रहस्यमय स्थान का एक गुच्छा चिपका देता है। यह पैडिंग या मार्जिन नहीं है, और यह लगातार क्षतिग्रस्त है। चेकबॉक्स पर एक चौड़ाई और ऊँचाई सेट करना और फिर overflow: hiddenकिसी कारण से अतिरिक्त स्थान को काट देना और IE की स्थिति सफारी और फ़ायरफ़ॉक्स के समान कार्य करने की अनुमति देता है।
• आपके पाठ के आकार के आधार पर, आपको कोई संदेह नहीं है कि आपको सापेक्ष स्थिति, चौड़ाई, ऊंचाई को समायोजित करने की आवश्यकता है, और चीजों को ठीक से देखने के लिए आगे बढ़ें।

मनाइए कि यह किसी और के लिए सहायक हो! मैंने आज सुबह तक जिस पर काम कर रहा था, उसके अलावा किसी भी प्रोजेक्ट पर इस विशिष्ट तकनीक की कोशिश नहीं की है, इसलिए यदि आपको कुछ ऐसा मिल जाए जो निश्चित रूप से लगातार काम करता हो।

Comments

ध्यान दें। आपको संभवतः अपने लेबल पर "के लिए" विशेषता डालनी चाहिए, यह सुनिश्चित करने के लिए कि यह सभी ब्राउज़रों और पाठ पाठकों के लिए काम करता है। (मुझे लगता है कि आप शायद इसे सरलता के लिए छोड़ देते हैं)

— आर्मस्ट्रांगेस्ट

अच्छा दु: ख, मुझे एहसास नहीं था कि कितने लोग इससे अनभिज्ञ थे: यदि आप लेबल टैग में इनपुट को लपेट रहे हैं, तो "फॉर" विशेषता अनावश्यक है। अपने आप को देखने के लिए स्वतंत्र महसूस करें: w3.org/TR/html401/interact/forms.html#h-17.9.1

— एक क्रेयॉन

मैं सशर्त टिप्पणियों का उपयोग करने के बारे में सुझाव से असहमत हूं। * फोब्बर सीएसएस हैक रखें। यह अच्छी तरह से काम करता है, YUI जैसे चौखटे द्वारा उपयोग किया जाता है, और आपको एक साथ रखने के लिए अनुमति देता है।

— इबुकेज

इसकी कोशिश क्रोम 28, मैक ओएसएक्स में है, और चेकबॉक्स पाठ की तुलना में काफी कम है

— MusikAnimal

ध्यान दें, यह क्रोम के नवीनतम संस्करणों में काम नहीं करता है (मैं v36 का उपयोग कर रहा हूं)। i.imgur.com/y9Ffxsh.png संपादित करें: न ही फ़ायरफ़ॉक्स (v31)

— हंस

Answer 2

कभी-कभी ऊर्ध्वाधर-संरेखित करने के लिए दो इनलाइन (स्पैन, लेबल, इनपुट, आदि ...) तत्वों को ठीक से काम करने के लिए एक-दूसरे के बगल की आवश्यकता होती है। निम्न चेकबॉक्स IE, Safari, FF और Chrome में ठीक से लंबवत केंद्रित हैं, भले ही पाठ का आकार बहुत छोटा या बड़ा हो।

वे सभी एक ही पंक्ति में एक-दूसरे के बगल में तैरते हैं, लेकिन नॉरूप का अर्थ है कि संपूर्ण लेबल पाठ हमेशा चेकबॉक्स के बगल में रहता है।

नकारात्मक पक्ष अतिरिक्त व्यर्थ टैग है।

.checkboxes label {
  display: inline-block;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

अब, यदि आपके पास एक बहुत लंबा लेबल पाठ है जिसे चेकबॉक्स के तहत लपेटने के बिना लपेटने की आवश्यकता है, तो आप लेबल तत्वों पर पैडिंग और नकारात्मक पाठ इंडेंट का उपयोग करेंगे:

.checkboxes label {
  display: block;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

Comments

धन्यवाद! इनपुट और स्पैन दोनों पर "वर्टिकल-अलाइन: मिडल" ने मेरे लिए बहुत अच्छा काम किया।

— विलियम सकल

display: block; float: left;निरर्थक प्रतीत होता है

— PHP

जब आप लेबल के अंदर इनपुट रखते हैं, तो आपको विशेषता के लिए उपयोग करने की आवश्यकता नहीं होती है। यह इसके बिना काम करता है।

— टॉमी सोरेनसेन

यह मेरी राय से स्वीकृत उत्तर होना चाहिए। कोई ट्वीकिंग की आवश्यकता नहीं है।

— टिम

Chrome 58 (विंडोज़) (वर्तमान शीर्ष उत्तर के विपरीत) पर अभी भी बहुत बढ़िया और पुष्टि की गई है।

— जेसन सी

Answer 3

वन क्रेयॉन के समाधान से काम करना , मेरे पास कुछ है जो मेरे लिए काम करता है और सरल है:

.font2 {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] { 
  bottom: 2px; 
} 

<label><input type="checkbox" /> Label text</label>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

रेंडर पिक्सेल-फॉर-पिक्सेल सफारी में (जिसका आधार रेखा मैं भरोसा करता हूं) और फ़ायरफ़ॉक्स और IE7 दोनों ही अच्छे हैं। यह विभिन्न लेबल फ़ॉन्ट आकार, बड़े और छोटे के लिए भी काम करता है। अब, चयन और आदानों पर IE के आधारभूत को ठीक करने के लिए ...

---

अपडेट: (तृतीय-पक्ष संपादित)

उचित bottomस्थिति फ़ॉन्ट-परिवार और फ़ॉन्ट-आकार पर निर्भर करती है! मैंने पाया bottom: .08em;कि चेकबॉक्स और रेडियो तत्वों का उपयोग करना एक अच्छा सामान्य मूल्य है। मैंने इसे कई छोटे / मध्य / बड़े फ़ॉन्ट-आकारों का उपयोग करके एरियल और कैलिब्री फोंट के साथ विंडोज़ में क्रोम / फ़ायरफ़ॉक्स / IE11 में परीक्षण किया।

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is a better value for different fonts! */
}

<label><input type="checkbox" /> Label text</label> 

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

Comments

बस दूसरों के लिए एक नोट: यह IE6 में काम नहीं करेगा क्योंकि यह [प्रकार = चेकबॉक्स] सीएसएस लक्ष्यीकरण का समर्थन नहीं करता है।

— एक क्रेयॉन

यदि IE6 समर्थन की आवश्यकता है, तो आप असमर्थित चयनकर्ताओं का उपयोग करने के बजाय केवल एक वर्ग जोड़ सकते हैं।

— हार्टलेसन

यह एक मेरे लिए काम किया। हालाँकि, "स्थिति: सापेक्ष; नीचे: 1px" सेट करने के बजाय, आप उसी परिणाम को प्राप्त करने के लिए "मार्जिन: 0 0 1px 0" का उपयोग कर सकते हैं।

— न्यूमैन

Answer 4

एक आसान बात जो अच्छी तरह से काम करती है, वह है कि चेकबॉक्स की ऊर्ध्वाधर स्थिति को ऊर्ध्वाधर-संरेखित करें। यह अभी भी सभी ब्राउज़रों में भिन्न होगा, लेकिन समाधान सरल है।

input {
    vertical-align: -2px;
}

संदर्भ

Comments

यह उन सभी के बीच सबसे छोटा बदलाव था, जो मेरे लिए हाल के अधिकांश संस्करणों में काम करता है।

— जॉनी_डी।

इसके साथ भी बेहतर काम करता है vertical-alignऔर position: relativeक्योंकि यह IE9 में भी सही ढंग से काम कर रहा है :)

— डेनिस 98

लेकिन यह फ़ॉन्ट-आकार पर निर्भर करता है। बड़े फ़ॉन्ट-आकारों के लिए, इसे उच्च नकारात्मक मानों में समायोजित किया जाना चाहिए, जैसे: ऊर्ध्वाधर-संरेखित: -6 पीएक्स;

— एस। सेरपोशन

संभवतः यह अलग-अलग फोंट के साथ बेहतर काम कर सकता है यदि em

— याकॉवएल

Answer 5

प्रयत्न vertical-align: middle

आपका कोड भी ऐसा लगता है जैसे यह होना चाहिए:

<form>
    <div>
        <input id="blah" type="checkbox"><label for="blah">Label text</label>
    </div>
</form>

Comments

<label for="blah">केवल तभी आवश्यक है जब आप किसी ऐसी चीज़ का उपयोग कर रहे हों जहाँ उसे लपेटने के लिए लेबल का कोई मतलब नहीं है (जैसे एक टेक्स्टबॉक्स; मैं आमतौर पर <label for="blah">Foo</label><input id="blah" type="text" />उस उदाहरण में उपयोग करूँगा )। चेकबॉक्स के साथ मुझे लगता है कि इसे लपेटने के लिए कम मार्कअप है।

— एक क्रेयॉन

बिल्कुल सही नहीं: लेबल-चेक उपयोगकर्ताओं को केवल चेकबॉक्स पर क्लिक करने के अलावा, चेकबॉक्स की जांच करने के लिए लेबल पर क्लिक करने की अनुमति देगा। यह दो तत्वों को एक साथ बांधने के लिए काफी आसान है।

— लुप्तप्राय

यदि किसी लेबल के अंदर एक इनपुट नेस्टेड है, तो लेबल को सक्रिय / फोकस के साथ क्लिक करें; विशेषता के लिए केवल उस मामले के लिए है जब इनपुट नेस्टेड नहीं है।

— एक क्रेयॉन

यह सच है एक क्रेयॉन, लेकिन यह "विशेषता" के लिए उपयोग करने के लिए अभी भी अच्छा अभ्यास है, या आपको कुछ ऐसे ब्राउज़रों के साथ समस्या होगी जो इस सिंटैक्स कफ IE को नहीं पहचानते हैं ।

— आर्मस्ट्रांगेस्ट

अगर आप नहीं चाहते हैं कि आपके चेकबॉक्स में एक आईडी हो तो आपको लेबल के अंदर चेकबॉक्स को लपेटने की जरूरत है

— सिमोन_विवर

Answer 6

मेरे समाधान का प्रयास करें, मैंने इसे IE 6, FF2 और Chrome में आज़माया और यह तीनों ब्राउज़रों में पिक्सेल द्वारा पिक्सेल प्रदान करता है।

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}

<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>

Comments

दिलचस्प; मुझे दोनों तत्वों को तैरने का विचार पसंद है; वह धीरे-धीरे रैपिंग मुद्दे को ठीक करता है। मैं कर रहा हूँ लेबल के साथ इनपुट लपेटकर से जुड़ी है, लेकिन उस कोड समाधान मैं पर पहुंचे की तुलना में बहुत क्लीनर की एक बिल्ली है।

— एक क्रेयॉन

इस उदाहरण में चेकबॉक्स इनपुट और लेबल में प्रॉपर्टी डिस्प्ले भी होना चाहिए: ब्लॉक और ऐसे मामले में उन्हें सामान्य DIV के रूप में माना जाएगा जिसे आसानी से संरेखित किया जा सकता है

— se_pavel

यह एक समस्या है, यदि लेबल उपलब्ध स्थान में फिट नहीं होता है तो क्या होगा? लेबल और चेकबॉक्स अलग हो गए हैं (चेकबॉक्स ऊपर-दाएँ है, और लेबल नीचे-बाएँ)। यदि आप अपने लेबल के अंदर चेकबॉक्स को लपेटते हैं तो आपको यह समस्या नहीं है।

— एनरिक

यह पिक्सेल के लिए काम नहीं करता था, लेकिन यह 3 सभ्य ब्राउज़रों पर बेहतर दिखने के लिए चीजों को प्राप्त करने के लिए पर्याप्त सभ्य था। मुझे लगता है कि मैं यह देखने के लिए एक और घंटे बिता सकता था कि यह बेहतर काम करेगा ...

— एलेक्सिस विलके

Answer 7

मेरे लिए एकमात्र पूरी तरह से काम कर रहा समाधान है:

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

क्रोम, फ़ायरफ़ॉक्स, ओपेरा, IE 7 और 8 में आज परीक्षण किया गया। उदाहरण: फिडेल

Answer 8

मैंने अपने समाधान का पूरी तरह से परीक्षण नहीं किया है, लेकिन यह बहुत अच्छा काम करता है।

मेरा HTML बस है:

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

फिर मैंने 24pxऊंचाई और चौड़ाई दोनों के लिए सभी चेकबॉक्स सेट किए । पाठ को संरेखित करने के लिए मैं लेबल को line-heightभी बनाता हूं और इस तरह 24pxअसाइन करता हूं vertical-align: top;:

संपादित करें: IE परीक्षण के बाद मैंने vertical-align: bottom;इनपुट में जोड़ा और लेबल का सीएसएस बदल दिया। आपको गद्दी छाँटने के लिए एक सशर्त IE css मामले की आवश्यकता हो सकती है - लेकिन पाठ और बॉक्स इनलाइन हैं।

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
<label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label>
<label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label>
<label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>

अगर किसी को लगता है कि यह काम नहीं करता है, तो कृपया मुझे बताएं। यहाँ यह कार्रवाई में है (क्रोम और IE में - माफी के रूप में स्क्रीनशॉट रेटिना पर लिया गया था और IE के लिए समानताएं का उपयोग कर):

Comments

यह काफी पुराना है, लेकिन जब से आपको यह बताने के लिए कहा गया है, यह फायरफॉक्स (चेकबॉक्स बेसलाइन से ऊपर हैं) में अच्छी तरह से काम नहीं करता है। आपको एक विस्तृत विवरण में रुचि हो सकती है जिसे मैंने पोस्ट किया है

— याकॉव

Answer 9

मैं अपने स्थैतिक पाठ की ऊर्ध्वाधर स्थिति को समायोजित करने के लिए आमतौर पर लाइन ऊंचाई का उपयोग करता हूं:

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

उम्मीद है की वो मदद करदे।

Comments

लाइन-ऊँचाई, डुह। हमेशा उस एक के बारे में भूल जाओ। अच्छी नौकरी, बढ़िया काम करती है।

— क्रेग

Answer 10

<form>
    <div>
        <label style="display: inline-block">
            <input style="vertical-align: middle" type="checkbox" />
            <span style="vertical-align: middle">Label text</span>
         </label>
    </div>
</form>

लेबल टैग का उपयोग करने पर ट्रिक केवल टेबल सेल या इनलाइन-ब्लॉक में वर्टिकल-अलाइन का उपयोग करना है।

Answer 11

आइए आखिरकार समस्या के स्रोत पर एक नज़र डालें

चेकबॉक्स छवियों का उपयोग करके प्रदान किए जाते हैं (सीएसएस के माध्यम से कस्टम सेट कर सकते हैं)। यहाँ फ़ायरफ़ॉक्स में एक (अनियंत्रित) चेकबॉक्स है, जिसे डोम इंस्पेक्टर के साथ हाइलाइट किया गया है:

और यहाँ क्रोम में वही अस्थिर चेकबॉक्स है:

आप मार्जिन (नारंगी) देख सकते हैं; पैडिंग मौजूद नहीं है (हरा दिखाया जाएगा)। तो क्या यह छद्म-मार्जिन दाईं ओर और चेकबॉक्स के नीचे है? ये चेकबॉक्स के लिए उपयोग की जाने वाली छवि के भाग हैं । इसलिए उपयोग करना vertical-align: middleवास्तव में पर्याप्त नहीं है और यह क्रॉस-ब्राउज़र समस्याओं का स्रोत है।

तो हम इस बारे में क्या कर सकते हैं?

एक स्पष्ट विकल्प है - छवियों को बदलें! सौभाग्य से, कोई ऐसा सीएसएस के माध्यम से कर सकता है और उन लोगों को बाहरी छवियों, बेस 64 (इन-सीएसएस) छवियों, इन-सीएसएस एसवीजी या सिर्फ छद्म तत्वों के साथ बदल सकता है। यह एक मजबूत (क्रॉस-ब्राउज़र!) दृष्टिकोण है, और यहाँ इस सवाल से चुराए गए समायोजन का एक उदाहरण है :

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}

<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

आप इस तरह की स्टाइलिंग के बारे में कुछ और अधिक गहराई से लेख पढ़ना चाह सकते हैं जैसे कुछ यहाँ सूचीबद्ध हैं ; यह इस उत्तर के दायरे से बाहर है।

ठीक है, फिर भी नो-कस्टम-इमेज-या-छद्म तत्वों के समाधान के बारे में क्या?

TL; DR: ऐसा लगता है कि यह काम नहीं करेगा, इसके बजाय कस्टम चेकबॉक्स का उपयोग करें

पहले, आइए ध्यान दें कि यदि अन्य ब्राउज़रों में चेकबॉक्स आइकन के अंदर छद्म मार्जिन मनमाना था, तो कोई सुसंगत समाधान नहीं था। एक का निर्माण करने के लिए, हमें मौजूदा ब्राउज़रों में ऐसी छवियों की शारीरिक रचना का पता लगाना होगा।

तो चेकबॉक्स में किन ब्राउज़रों के पास छद्म मार्जिन है? मैंने क्रोम 75, विवाल्डी 2.5 (क्रोमियम आधारित), फायरफॉक्स 54 (ऐसा पुराना क्यों नहीं है), IE 11, एज 42, सफारी की जाँच की है ?? (एक मिनट के लिए एक उधार लिया, संस्करण की जांच करना भूल गया)। केवल क्रोम और विवाल्डी में ऐसे छद्म मार्जिन हैं (मुझे सभी क्रोमियम-आधारित ब्राउज़र जैसे कि ओपेरा पर संदेह है)।

उन छद्म मार्जिन का आकार क्या है? यह पता लगाने के लिए एक ज़ूम किए गए चेकबॉक्स का उपयोग कर सकते हैं:

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

मेरा परिणाम ~ 7% चौड़ाई / ऊंचाई है और इसलिए 0.9-1.0px निरपेक्ष इकाइयों में है। सटीकता पर सवाल उठाया जा सकता है, हालांकि: zoomचेकबॉक्स के लिए विभिन्न मूल्यों का प्रयास करें । क्रोम और विवाल्डी दोनों में मेरे परीक्षणों में छद्म-मार्जिन के सापेक्ष आकार zoom10, 20 और 11-19 के मानों में बहुत भिन्न हैं : (??)

scale अधिक सुसंगत प्रतीत होता है:

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

इसलिए शायद ~ 14% और 2px सही मान हैं।

अब जब हम छद्म-मार्जिन के आकार को जानते हैं (?), तो ध्यान दें कि यह पर्याप्त नहीं है। क्या चेकबॉक्स के आकार सभी ब्राउज़रों के लिए समान हैं? अफसोस! यहां बिना जांच किए गए चेकबॉक्स के लिए DOM इंस्पेक्टर क्या दिखाता है:

• फ़ायरफ़ॉक्स: 13.3px
• क्रोमियम-आधारित: 12.8px पूरी चीज़ के लिए, इसलिए 12.8 (100% - 14%) = 11px , जो नेत्रहीन चेकबॉक्स के रूप में माना जाता है
• आईई 11, एज: 13 पीएक्स
• सफ़ारी: n / a (ये एक ही स्क्रीन पर तुलना की जानी चाहिए, मुझे विश्वास है)

अब इससे पहले कि हम किसी समाधान या चाल पर चर्चा करें, आइए पूछते हैं: एक सही संरेखण क्या है ? हम क्या हासिल करने की कोशिश कर रहे हैं? कुछ हद तक यह स्वाद की बात है, लेकिन मूल रूप से मैं निम्नलिखित "अच्छे" संरेखण के पहलुओं के बारे में सोच सकता हूं:

एक ही आधार रेखा पर पाठ और चेकबॉक्स (मैं जानबूझकर यहाँ चेकबॉक्स का आकार समायोजित नहीं करता हूँ):

या लोअरकेस अक्षरों के संदर्भ में एक ही मध्य रेखा है:

या बड़े अक्षरों के संदर्भ में एक ही मध्य रेखा (विभिन्न फ़ॉन्ट आकार के लिए अंतर देखना आसान है):

और हमें यह भी तय करना होगा कि चेकबॉक्स का आकार लोअरकेस अक्षर की ऊंचाई के बराबर होना चाहिए, कैपिटल लेटर या कुछ और (बड़ा, छोटा या लोअरकेस और कैपिटल के बीच)।

इस चर्चा के लिए आइए एक संरेखण को अच्छा कहें यदि चेकबॉक्स पाठ के समान आधार रेखा पर है और इसमें बड़े अक्षर का आकार है (अत्यधिक तर्कपूर्ण विकल्प):

अब हमारे पास कौन से उपकरण हैं:

1. चेकबॉक्स का आकार समायोजित करें
2. क्रोमियम को उसके छद्म मार्जिन वाले चेकबॉक्स से पहचानें और विशिष्ट शैलियों को सेट करें
3. चेकबॉक्स / लेबल वर्टिकल अलाइनमेंट समायोजित करें

?

1. के बारे में चेकबॉक्स आकार समायोजन : देखते हैं width, height, size, zoom, scale(मैं कुछ छूट गया है?)। zoomऔर scaleपूर्ण आकार सेट करने की अनुमति नहीं देते हैं, इसलिए वे केवल पाठ आकार को समायोजित करने में मदद कर सकते हैं, क्रॉस-ब्राउज़र आकार सेट नहीं कर सकते (जब तक कि हम ब्राउज़र-विशिष्ट नियम नहीं लिख सकते)। sizeChrome के साथ काम नहीं करता है (क्या यह पुराने IE के साथ काम करता है? वैसे भी, यह उतना दिलचस्प नहीं है)। widthऔर heightक्रोम और अन्य ब्राउज़रों में काम करते हैं, इसलिए हम एक सामान्य आकार सेट कर सकते हैं, लेकिन फिर से, क्रोम में यह पूरी छवि का आकार सेट करता है, चेकबॉक्स ही नहीं। नोट: यह न्यूनतम (चौड़ाई, ऊंचाई) है जो एक चेकबॉक्स के आकार को परिभाषित करता है (यदि चौड़ाई, ऊंचाई, चेकबॉक्स वर्ग के बाहर का क्षेत्र "छद्म-मार्जिन" में जोड़ा जाता है)।

   एक दुर्भाग्यपूर्ण बात यह है कि क्रोम चेकबॉक्स में छद्म मार्जिन किसी भी चौड़ाई और ऊंचाइयों के लिए शून्य पर सेट नहीं है, जहां तक ​​मैं देख सकता हूं।

2. मुझे डर है कि इन दिनों कोई विश्वसनीय CSS-only विधि नहीं है।

3. आइए ऊर्ध्वाधर संरेखण पर विचार करें। Chrome के छद्म-मार्जिन के कारण या उसके vertical-alignसेट होने पर लगातार परिणाम नहीं दे सकते , सभी ब्राउज़रों के लिए समान "समन्वय प्रणाली" प्राप्त करने का एकमात्र वास्तविक विकल्प लेबल और इनपुट संरेखित करना है :middlebaselinetop

   

   (चित्र पर: वर्टिकल-अलाइन: बॉक्स-शैडो के बिना ऊपर, नीचे और नीचे)

तो इससे हमें क्या परिणाम मिलता है?

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}

<label><input type="checkbox">label</label>

ऊपर स्निपेट क्रोम (क्रोमियम-आधारित ब्राउज़र) के साथ काम करता है, लेकिन अन्य ब्राउज़रों को चेकबॉक्स के छोटे आकार की आवश्यकता होती है। ऐसा लगता है कि क्रोमियम के चेकबॉक्स छवि क्विक के आसपास काम करने वाले एक तरह से आकार और ऊर्ध्वाधर संरेखण दोनों को समायोजित करना असंभव है। मेरा अंतिम सुझाव है: इसके बजाय कस्टम चेकबॉक्स का उपयोग करें - और आप निराशा से बचेंगे :)

Comments

यह जवाब बहुत गहरा है!

— मैरकी

Answer 12

अब वह फ्लेक्सबॉक्स सभी आधुनिक ब्राउज़रों में समर्थित है, ऐसा कुछ मेरे लिए एक आसान तरीका है।

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

यहाँ पूर्ण उपसर्ग संस्करण डेमो है:

label {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}

<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>

Answer 13

मुझे लगता है कि यह सबसे आसान तरीका है

input {
    position: relative;
    top: 1px;
}

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
<form>

Comments

सवाल यह है: क्या यह सभी ब्राउज़रों में अच्छा काम करता है? ;-)

— जोन्सन

Answer 14

मुझे सापेक्ष स्थिति पसंद नहीं है क्योंकि यह अपने स्तर पर हर चीज़ के ऊपर प्रदान किया गया तत्व है (यदि आपके पास जटिल लेआउट है तो यह किसी चीज़ के ऊपर मिल सकता है)।

मैंने पाया है कि vertical-align: subक्रोम, फ़ायरफ़ॉक्स और ओपेरा में संरेखित चेकबॉक्स अच्छे दिखते हैं। जब से मेरे पास मैकओएस और आईई 10 नहीं है, सफारी की जांच नहीं कर सकता, लेकिन मैंने पाया है कि यह मेरे लिए काफी अच्छा समाधान है।

एक और उपाय हर ब्राउज़र के लिए विशिष्ट सीएसएस बनाने और उसे%-पिक्सेल / EM में कुछ वर्टिकल-अलाइन के साथ ठीक करने की कोशिश हो सकती है: http://css-tricks.com/snippets/css/browser-specific-hackles :

Comments

जब तक फ़ॉन्ट आकार बहुत बड़ा नहीं है तब तक काम करने लगता है।

— रोजबेक

Answer 15

यह मेरे लिए अच्छा काम करता है:

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}

<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>

Comments

आप pxs के बजाय ईएमएस का उपयोग करने के लिए आशीर्वाद।

— आईडीजियोप्रोजेक्ट

Answer 16

400+ upvotes के साथ चुने गए उत्तर ने मेरे लिए Chrome 28 OSX में काम नहीं किया, शायद इसलिए कि इसका OSX में परीक्षण नहीं किया गया था या इसने इस प्रश्न का उत्तर दिए जाने पर 2008 में जो कुछ भी काम किया था।

समय बदल गया है, और नए CSS3 समाधान अब संभव हैं। मेरा समाधान कस्टम चेकबॉक्स बनाने के लिए छद्म कोड का उपयोग करता है । तो वजीफा (पेशेवरों या विपक्ष, हालांकि आप इसे देखो) इस प्रकार हैं:

• केवल आधुनिक ब्राउज़रों में काम करता है (FF3.6 +, IE9 +, Chrome, Safari)
• एक कस्टम डिज़ाइन किए गए चेकबॉक्स पर निर्भर करता है, जिसे हर ब्राउज़र / OS में ठीक उसी तरह प्रस्तुत किया जाएगा। यहाँ मैंने कुछ सरल रंगों को चुना है, लेकिन आप हमेशा रैखिक ग्रेडिएंट जोड़ सकते हैं और इस तरह के धमाके को और अधिक दे सकते हैं।
• एक निश्चित फ़ॉन्ट / फ़ॉन्ट आकार के अनुसार तैयार किया जाता है, जिसे यदि बदल दिया जाता है, तो आप इसे लंबवत संरेखित करने के लिए बस चेकबॉक्स की स्थिति और आकार बदल देंगे। यदि सही ढंग से ट्वीक किया गया है, तो अंतिम परिणाम अभी भी सभी ब्राउज़र / ऑपरेटिंग सिस्टम में बिल्कुल समान होना चाहिए।
• कोई ऊर्ध्वाधर-संरेखण गुण नहीं, कोई तैरता नहीं
• मेरे उदाहरण में दिए गए मार्कअप का उपयोग करना चाहिए, यदि यह प्रश्न की तरह संरचित है, तो यह काम नहीं करेगा, हालांकि, लेआउट अनिवार्य रूप से समान दिखाई देगा। यदि आप चीजों को इधर-उधर करना चाहते हैं, तो आपको संबंधित सीएसएस को भी स्थानांतरित करना होगा

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}

<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

यह समाधान चेकबॉक्स को छुपाता है , और दृश्य चेकबॉक्स बनाने के लिए लेबल में छद्म कोड जोड़ता है और शैली बनाता है। क्योंकि लेबल छिपे हुए चेकबॉक्स से बंधा हुआ है, इनपुट फ़ील्ड अभी भी अपडेट हो जाएगा और फॉर्म के साथ मान सबमिट किया जाएगा।

और अगर आप रुचि रखते हैं, तो यहां मेरा रेडियो बटन पर जाना है: http://jsfiddle.net/DtKrV/2/

आशा है कि कोई इसे उपयोगी पाता है!

Answer 17

मुझे इसे इस तरह से करने में कोई समस्या नहीं है:

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>

Comments

जैसा कि मैंने पिछले पोस्टरों से कहा है जिन्होंने सिफारिश की है: मुझे यह पसंद नहीं है क्योंकि इसके लिए अनावश्यक मार्कअप की आवश्यकता होती है। इसके अलावा, मैंने उस मार्कअप की कोशिश की, लेकिन इनपुट के नीचे लेबल को लपेटने से रोकना मुश्किल था (जबकि अभी भी लेबल / इनपुट समूह प्रत्येक की अपनी तर्ज पर है)।

— एक क्रेयॉन

इसलिए, "आवश्यक" मार्कअप (शायद लगभग सभी द्वारा उपयोग किया जाता है) के बजाय, आपके पास आवश्यक सीएसएस होगा?

— रॉबर्ट सी। बार्थ

रैपिंग के साथ समस्या खड़ी है। लेकिन सामान्य तौर पर, हाँ, मैं सीएसएस की तुलना में एक्स्ट्रासियस सीएसएस होता, क्योंकि सीएसएस कैश किया जाता है, लेकिन मार्कअप को हर नए पेज के लिए नए सिरे से लोड करना पड़ सकता है।

— एक क्रेयॉन

तुलना करें: अतिरिक्त CSS -vs के 1 उदाहरण- अतिरिक्त मार्कअप के कई उदाहरण।

— ग्रेग

Answer 18

यदि आप ASP.NET वेब प्रपत्रों का उपयोग करते हैं, तो आपको DIV और अन्य तत्वों या निश्चित आकारों के बारे में चिंता करने की आवश्यकता नहीं है। हम CSS में CheckboxList इनपुट प्रकार पर <asp:CheckBoxList>सेट करके पाठ को संरेखित कर सकते हैं float:left।

कृपया निम्न उदाहरण कोड की जाँच करें:

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

.ASPX कोड:

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>

Answer 19

यदि आप ट्विटर बूटस्ट्रैप का उपयोग कर रहे हैं, तो आप निम्न checkboxपर कक्षा का उपयोग कर सकते हैं <label>:

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>

Answer 20

एक इनपुट प्रकार के साथ चेकबॉक्स लेबल के अंदर लिपटे और बाईं ओर तैरने लगे जैसे:

<label for="id" class="checkbox">
    <input type="checkbox" id="id">
    <span>The Label</span>
</label>

यह मेरे लिए काम किया:

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

सुनिश्चित करें कि की ऊंचाई (ब्लॉकलेवल) की लाइन-ऊंचाई के समान है।

Answer 21

चेकबॉक्स की ऊँचाई और चौड़ाई को हार्डकोड करें, इसकी पैडिंग को निकालें, और लेबल की लाइन-ऊँचाई के बराबर इसकी ऊँचाई और ऊर्ध्वाधर मार्जिन बनाएँ। यदि लेबल टेक्स्ट इनलाइन है, तो चेकबॉक्स फ्लोट करें। फ़ायरफ़ॉक्स, क्रोम, और IE7 + सभी निम्नलिखित उदाहरण प्रस्तुत पहचान: http://www.kornea.com/css-checkbox-align

Comments

अच्छा! लेकिन आपको यहां HTML और CSS कोड को कॉपी करने पर विचार करना चाहिए। बाहरी लिंक पर इतना निर्भर करने वाले उत्तर हतोत्साहित होते हैं। परिणाम देखने के लिए लिंक अभी भी मूल्यवान है, लेकिन मुझे लगता है कि यहां कोड दिखाने से आपको अधिक वोट प्राप्त करने में मदद मिलेगी।

— मैरियानो देसनज़े

नहीं, वे (फ़ायरफ़ॉक्स में और क्रोम में, क्रोम में चेकबॉक्स बेसलाइन से ऊपर हैं) की तुलना नहीं करते हैं, मैंने समझाया है कि क्यों

— याकॉव

क्यों, आप उस चीज़ का दावा करते हैं जो दोनों ब्राउज़रों के स्क्रीनशॉट के साथ भी असमर्थित है। जब आप एक दावा करते हैं, तो दूसरों के लिए इसे अयोग्य ठहराना एक दावे के लिए प्रमाण प्रदान करना आपका काम है। मैं उन लोगों की तुलना करता था और स्क्रीनशॉट जोड़ता था, लेकिन चित्र जोड़ने में टिप्पणियों का समर्थन नहीं करता; आप मेरे जवाब में चित्रों पर एक नज़र डाल सकते हैं। यह हालांकि ब्राउज़र संस्करणों के साथ भिन्न हो सकता है, इसलिए स्क्रीनशॉट प्रदान करना, जिसमें ब्राउज़र संस्करणों वाले एनोटेशन सहायक होंगे।

— याकोवैल

विभिन्न ब्राउज़रों से जुड़े पेज पर जाएँ।

— व्लादिमीर कोर्निआ

तो मैंने वो किया, क्या आपने? :) क्या आपको अंतर नहीं दिखता है? imagebin.ca/v/50stCZZGl7Ug imagebin.ca/v/50stNBiv29Ks जबकि फ़ायरफ़ॉक्स में वे पूरी तरह से संरेखित हैं, क्रोम में चेकबॉक्स बेसलाइन के बारे में है (वैसे, आप @ के माध्यम से उल्लेखों का उपयोग कर सकते हैं यदि आप तेज उत्तरों में रुचि रखते हैं)

— याकॉव

Answer 22

input[type=checkbox]
{
    vertical-align: middle;
} 

<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

Answer 23

मैं आमतौर पर एक चेकबॉक्स को अनलेबल कर देता हूं और फिर उसका "लेबल" एक अलग तत्व बनाता हूं। यह एक दर्द है, लेकिन चेकबॉक्स और उनके लेबल के बीच इतना क्रॉस-ब्राउज़र अंतर है (जैसा कि आपने देखा है) कि यह एकमात्र तरीका है जिससे मैं नियंत्रित हो सकता हूं कि सब कुछ कैसा दिखता है।

मैं भी अंत में winforms विकास में ऐसा ही कर रहा हूँ। मुझे लगता है कि चेकबॉक्स नियंत्रण के साथ मूलभूत समस्या यह है कि यह वास्तव में दो अलग-अलग नियंत्रण हैं: बॉक्स और लेबल। एक चेकबॉक्स का उपयोग करके, आप इसे नियंत्रण के कार्यान्वयनकर्ताओं तक यह तय करने के लिए छोड़ रहे हैं कि उन दो तत्वों को एक दूसरे के बगल में कैसे प्रदर्शित किया जाता है (और वे हमेशा इसे गलत पाते हैं, जहां गलत = जो आप नहीं चाहते हैं)।

मैं वास्तव में आशा करता हूं कि किसी के पास आपके प्रश्न का बेहतर उत्तर होगा।

Answer 24

सीएसएस:

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

HTML:

<div class="threeCol">
    <div class="listItem">
        <input type="checkbox" name="name" id="id" value="checkbox1" />
        <label for="name">This is your checkBox</label>
    </div>
</div>

उपरोक्त कोड थ्रेकोल्स में आपकी सूची आइटम को जगह देगा और बस चौड़ाई को सूट करेगा।

Answer 25

निम्नलिखित ब्राउज़रों में पिक्सेल-परिपूर्ण स्थिरता देता है, यहां तक ​​कि IE9:

दृष्टिकोण स्पष्ट होने के दृष्टिकोण से काफी समझदार है:

1. एक इनपुट और एक लेबल बनाएं।
2. उन्हें ब्लॉक के रूप में प्रदर्शित करें, ताकि आप उन्हें अपनी इच्छानुसार फ्लोट कर सकें।
3. वे केंद्र और संरेखित संरेखित करने के लिए समान मान के लिए ऊँचाई और रेखा-ऊँचाई सेट करें।
4. के लिए उन्हें माप, गणना करने के लिए तत्वों की ऊंचाई, ब्राउज़र उन तत्वों के लिए फ़ॉन्ट की ऊंचाई को पता होना चाहिए, और यह अपने आप उन्हें माप में सेट नहीं किया जाना चाहिए।

विश्व स्तर पर लागू सामान्य नियम में यह परिणाम है:

input, label {display:block;float:left;height:1em;line-height:1em;}

फॉन्‍ट साइज प्रति प्रपत्र, फ़ील्डसेट या एलीमेंट के साथ।

#myform input, #myform label {font-size:20px;}

मैक, विंडोज, Iphone, और Android पर नवीनतम क्रोम, सफारी और फ़ायरफ़ॉक्स में परीक्षण किया गया। और IE9।

यह विधि उन सभी इनपुट प्रकारों पर लागू होती है जो पाठ की एक पंक्ति से अधिक नहीं हैं। सूट करने के लिए एक प्रकार का नियम लागू करें।

Comments

हम्म, यह अच्छी तरह से दिखता है जब लेबल लोअरकेस अक्षर से शुरू होता है, लेकिन अगर यह एक पूंजी के साथ शुरू होता है, तो यह बहुत खराब है। क्या आप यहाँ एक स्निपेट जोड़ सकते हैं?

— याकॉव

Answer 26

इसलिए मुझे पता है कि यह कई बार उत्तर दिया गया है, लेकिन मुझे लगता है कि मेरे पास उन तरीकों की तुलना में अधिक सुरुचिपूर्ण समाधान है जो पहले से ही प्रदान किए गए हैं। और न केवल 1 सुरुचिपूर्ण समाधान, बल्कि अपने फैंसी को गुदगुदाने के लिए 2 अलग-अलग समाधान। उस के साथ, कहा कि सब कुछ तुम्हें पता है और देखने की जरूरत है 2 जेएस फिडल में शामिल हैं, टिप्पणियों के साथ।

---

समाधान # 1 दिए गए ब्राउज़र के मूल "चेकबॉक्स" पर निर्भर करता है, हालांकि एक मोड़ के साथ ... इसका एक div में निहित है जो क्रॉस-ब्राउज़र की स्थिति को आसान करता है, एक अतिप्रवाह के साथ: 1px विस्तारित चेकबॉक्स की अधिकता को छिपाने के लिए छिपाया गया (यह तो आप एफएफ की बदसूरत सीमाओं को देख नहीं सकते हैं)

सरल HTML: (टिप्पणियों के साथ सीएसएस की समीक्षा के लिए लिंक का अनुसरण करें, कोड ब्लॉक स्टैकओवरफ्लो को संतुष्ट करने के लिए है) http://jsfiddle.net/KQghJ/

<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>

---

समाधान # 2 एक डीआईवी की सीएसएस स्थिति को टॉगल करने के लिए "चेकबॉक्स टॉगल हैक" का उपयोग करता है, जिसे ठीक से ब्राउज़र में पोस्ट किया गया है, और चेकबॉक्स अनचेक और चेक किए गए राज्यों के लिए एक साधारण स्प्राइट के साथ सेटअप। चेकबॉक्स टॉगल हैक के साथ पृष्ठभूमि-स्थिति को समायोजित करने की आवश्यकता है। यह मेरी राय में, अधिक सुरुचिपूर्ण समाधान है क्योंकि आपके पास अपने चेकबॉक्स और रेडियो पर अधिक नियंत्रण है, और गारंटी दे सकता है कि वे पूरे ब्राउज़र में समान दिखते हैं।

साधारण HTML: (टिप्पणियों के साथ CSS की समीक्षा करने के लिए लिंक का अनुसरण करें, कोड ब्लॉक को StackOverflow को संतुष्ट करना है) http://jsfiddle.net/Sx5M2/

<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>

---

अगर कोई भी इन तरीकों से असहमत है, तो कृपया मुझे एक टिप्पणी छोड़ दें, मैं इस पर कुछ प्रतिक्रिया सुनना पसंद करूंगा कि अन्य लोग इन समाधानों में क्यों नहीं आए हैं, या यदि उनके पास है, तो मैं उनके बारे में यहां कोई जवाब क्यों नहीं देखता हूं? यदि कोई इनमें से किसी एक विधि को विफल होता देखता है, तो उसे भी देखना अच्छा होगा, लेकिन इन्हें नवीनतम ब्राउज़रों में परीक्षण किया गया है और HTML / CSS विधियों पर भरोसा करते हैं जो अभी तक पुराने और सार्वभौमिक हैं।

Answer 27

याय धन्यवाद! यह भी मुझे हमेशा के लिए पागल कर रहा है।

मेरे विशेष मामले में, इसने मेरे लिए काम किया:

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

मैं reset.css का उपयोग कर रहा हूं जो कुछ अंतरों की व्याख्या कर सकता है, लेकिन यह मेरे लिए अच्छा काम करता है।

Answer 28

position: relative; IE में z- इंडेक्स और एनिमेशन जैसे jQuery के स्लाइडअप / स्लाइडडाउन के साथ कुछ मुद्दे हैं।

सीएसएस:

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    position: relative;
    top: 3px;
    margin: 0 3px 0 0;
    padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
    vertical-align: middle;
    position: static;
    margin-bottom: -2px;
    height: 13px;
    width: 13px;
}

jQuery:

$(document).ready(function () {
    if ($.browser.msie && $.browser.version <= 7) {
        $('input[type=checkbox]').addClass('ie7');
        $('input[type=radio]').addClass('ie7');
    }
});

स्टाइलिंग को संभवतः उपयोग किए जाने वाले फ़ॉन्ट-आकार के आधार पर ट्विक्स की आवश्यकता होती है <label>

पुनश्च:
मैं IE6 में सीएसएस काम करने के लिए ie7js का उपयोग करता हूं ।

Answer 29

बस का उपयोग करें vertical-align: sub, के रूप में pokrishka पहले से ही सुझाव दिया।

बेला

HTML कोड:

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

सीएसएस कोड:

.checkboxes input {
    vertical-align: sub;
}

Answer 30

सरल समाधान:

<label style="display:block">
  <input style="vertical-align:middle" type="checkbox">
  <span  style="vertical-align:middle">Label</span>
</label>

क्रोम, फ़ायरफ़ॉक्स, IE9 +, सफारी, iOS 9+ में परीक्षण किया गया