सीएसएस के फ़ील्ड का साइज़ बदलना

बदलाव करने लायक कॉन्टेंट वाले एलिमेंट के अपने-आप साइज़ बदलने के लिए, कोड की एक लाइन.

Adam Argyle

field-sizing के बिना, एक सही साइज़ का इनपुट फ़ील्ड बनाने के लिए, आपको या तो टेक्स्ट फ़ील्ड इनपुट के औसत साइज़ का अनुमान लगाना पड़ता था या फिर उपयोगकर्ता के टेक्स्ट डालने के दौरान, वर्णों की गिनती करने और एलिमेंट की ऊंचाई या चौड़ाई को बढ़ाने के लिए JavaScript का इस्तेमाल करना पड़ता था. दूसरे शब्दों में, यह आसान नहीं था और किसी उपयोगकर्ता की ओर से इनपुट में डाले गए कॉन्टेंट को फ़ॉलो करने में गड़बड़ी होने की आशंका होती है.

field-sizing के साथ, कॉन्टेंट के हिसाब से साइज़ बदलने के लिए, आपको सीएसएस की एक लाइन की ज़रूरत होगी. कॉन्टेंट के हिसाब से साइज़ बदलने का यह तरीका, टेक्स्ट एरिया के अलावा कई अन्य कामों के लिए भी काम करता है!

textarea, select, input {
  field-sizing: content;
}

झटपट लिंक

खास जानकारी | एक्सप्लेनर

कम अवधि के वीडियो पसंद हैं?

Wes Bos और Jhey, दोनों का Twitter पर एक बेहतरीन वीडियो है. इनसे आपको field-sizing से जुड़ी जानकारी मिलेगी.

फ़ील्ड के साइज़ का असर किन एलिमेंट पर पड़ता है?

यहां उन <form> एलिमेंट की सूची दी गई है जिन पर field-sizing काम करता है. साथ ही, हर एलिमेंट पर पड़ने वाले असर की खास जानकारी भी दी गई है.

<textarea>

इनपुट, min-inline-size तक छोटा हो जाता है या प्लेसहोल्डर में फ़िट हो जाता है.

उपयोगकर्ताओं के टाइप करते समय, इनपुट इनलाइन दिशा में बढ़ता रहता है. इनपुट तब तक बढ़ता जाता है, जब तक वह किसी ज़्यादा से ज़्यादा इनलाइन साइज़ तक नहीं पहुंच जाता. इस समय पर टेक्स्ट रैप होगा और इनपुट का ब्लॉक साइज़, नई लाइन में फ़िट होने के लिए बढ़ जाएगा.

<select> और <select multiple>

चुने गए विकल्प के हिसाब से चुनने के लिए, चुना गया एलिमेंट छोटा हो जाता है.

multiple एट्रिब्यूट के साथ चुना गया विकल्प, सबसे बड़े विकल्पों में फ़िट होने के लिए बढ़ता है. साथ ही, विकल्पों की संख्या के हिसाब से लंबाई भी बदलता है.

<input type="text">, <input type="email">, और <input type="number">

इनपुट, min-inline-size तक छोटा हो जाता है या प्लेसहोल्डर में फ़िट हो जाता है.

उपयोगकर्ताओं के टाइप करने पर, इनपुट इनलाइन दिशा में तब तक बढ़ता रहता है, जब तक कि वह max-inline-size तक नहीं पहुंच जाता. इस पॉइंट पर, इनपुट की वैल्यू को ओवरफ़्लो क्लिप करते हुए दिखाया जाता है.

<input type="file">

इनपुट, बटन और पहले से भरे गए फ़ाइल नाम के टेक्स्ट तक छोटा हो जाता है.

फ़ाइल अपलोड करने पर, इनपुट, बटन और फ़ाइल नाम के टेक्स्ट जितना चौड़ा हो जाता है.

नतीजे देखना, टेस्ट करना, और उनकी तुलना करना

यहां हर फ़ॉर्म एलिमेंट के पहले और बाद के व्यवहार का एक इंटरैक्टिव और कम से कम उदाहरण दिया गया है, जिस पर field-sizing का असर पड़ता है.

करीब से देखें

[placeholder] का इस्तेमाल करने पर, प्लेसहोल्डर कॉन्टेंट बन जाता है. इस बारे में पहले बताया गया था, लेकिन इसे यहां बताया गया है, क्योंकि किसी फ़ॉर्म को स्टाइल देते समय यह जानना ज़रूरी है. लंबा या छोटा प्लेसहोल्डर, field-sizing: content के साथ इनपुट के स्वाभाविक साइज़ को बदल देगा.

खाली और ओवरफ़्लो स्टाइल हैंडलिंग

field-sizing का इस्तेमाल करने का मतलब है कि आपको कुछ और काम करना होगा. अहमद शेड्ड इसे "डिफ़ेंसिव सीएसएस" कहते हैं, जहां इसका मकसद किसी चीज़ के बारे में बताना ज़रूरी नहीं है, न कि कोई अनचाहा दिखने से बचाने के लिए उसे कैसा व्यवहार करना चाहिए. इससे पहले, इनपुट का साइज़ तय होता था. हालांकि, field-sizing: content को लागू करने के बाद, इनपुट बहुत छोटे या बहुत बड़े हो सकते हैं.

शुरुआत करने के लिए, इन स्टाइल का इस्तेमाल करना बेहतर होता है. इनसे एलिमेंट को बॉक्स में बहुत छोटे नहीं होने में मदद मिलती है. साथ ही, textarea के मामले में, एलिमेंट का साइज़ बहुत बड़ा नहीं होता.

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

यह सीएसएस, साइज़ के लिए मिलती-जुलती इकाइयों का इस्तेमाल करती है. नई lh इकाई, ब्लॉक के साइज़ के लिए बिलकुल सही है और ch इनलाइन साइज़ के लिए अच्छी तरह से काम करती है.

फ़ील्ड के साइज़ की डिफ़ॉल्ट वैल्यू क्या है?

field-sizing की डिफ़ॉल्ट वैल्यू fixed है और यह सिर्फ़ fixed या content के दो वैल्यू को स्वीकार करता है.