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

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

Adam Argyle

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

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

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

Browser Support

• 123
• 123
• 152
• 26.2

Source

त्वरित लिंक

खास जानकारी | जानकारी देने वाला लेख

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

वेस बॉस और जेही, दोनों के Twitter पर field-sizing के बारे में शानदार वीडियो मौजूद हैं.

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

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

<textarea>

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

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

<select> और <select multiple>

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

multiple एट्रिब्यूट वाला select, सबसे बड़े विकल्प के हिसाब से बढ़ता है. साथ ही, विकल्पों की संख्या के हिसाब से, इसकी ऊंचाई भी बढ़ती है.

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

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

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

<input type="file">

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

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

नतीजे देखना, उनकी जांच करना, और उनकी तुलना करना

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

Codepen पर इसे आज़माकर देखें

बारीकी से देखना

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

Codepen पर इसे आज़माकर देखें

खाली और ओवरफ़्लो होने वाली स्टाइल को मैनेज करना

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