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

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

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