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

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

Adam Argyle

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

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

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

Browser Support

• 123
• 123
• 152
• 26.2

Source

त्वरित लिंक

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

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

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

`field-sizing` से किन एलिमेंट पर असर पड़ता है?

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

<textarea>

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

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

<select> और <select multiple>

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

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 की डिफ़ॉल्ट वैल्यू क्या है?

field-sizing की डिफ़ॉल्ट वैल्यू fixed है. इसमें सिर्फ़ fixed या content वैल्यू डाली जा सकती हैं.