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

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

Adam Argyle

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

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

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

त्वरित लिंक

खास बातें | जानकारी

क्या आपको शॉर्ट वीडियो पसंद हैं?

field-sizing के बारे में जानने के लिए, Wes Bos और Jhey के Twitter पर मौजूद वीडियो देखें.

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

यहां उन <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 की दो वैल्यू स्वीकार करती है.