डिफ़ॉल्ट इनपुट तत्व आकार

Question

डिफ़ॉल्ट रूप से इनपुट तत्व आकार = "20" है यदि यह परिभाषित इनलाइन या सीएसएस शैली नियम को इसके लिए जिम्मेदार नहीं है।

आप मूल्य का वास्तविक आकार डिफ़ॉल्ट कैसे बनाते हैं? अन्य तत्वों के लिए:

<div style="display: inline; width: auto;"> 
    The box will only fit the width of it's content 
</div> 

चौड़ाई: ऑटो की आपको आवश्यकता है। मैं परिभाषित चौड़ाई नहीं लगा सकता क्योंकि मान अधिक लंबा हो सकता है। उदाहरण के लिए:

<input id="short" type="text" value="1000" /> 
<input id="long" type="text" value=" Areally long name is in this input field." /> 

मैं # लघु रूप में लंबे समय के रूप में की जरूरत होने के लिए 1000 (अनिवार्य रूप से आकार = "4" + गद्दी), लेकिन #long के आकार होना चाहता हूँ। ये इनपुट प्रोग्रामिक रूप से आ रहे हैं इसलिए मैं केवल उस शॉर्ट क्लास को नहीं रख सकता जिसे मैं छोटा चाहता हूं और जिस पर मैं लंबे समय तक चाहता हूं उस पर एक लंबी कक्षा। मैं वास्तव में इसे पसंद करूंगा यदि मैं डाल सकता हूं:

input { width: auto; } 

वैसे भी ऐसा करने के लिए? डिफ़ॉल्ट रूप से

Answer 1

इनपुट तत्व है आकार = "20"

यह "डिफ़ॉल्ट आकार" ब्राउज़र, संस्करण और अपने ओएस पर निर्भर करता है। इनलाइन शैलियों में ऐसा करना संभव नहीं है।

सबसे अच्छा समाधान चौड़ाई और गद्दी सेट करें कि वह अंत में इस सीएसएस

जोड़ने

input { 
    width: 98%; 
    padding: 1%; 
} 

तो पूर्ण बाएँ और दाएँ 0

<fieldset> 
    <input type="text" /> 
</fieldset> 

के लिए सेट 100% तक जोड़ता है

<style type="text/css"> 
    fieldset { 
     position: relative; 
    } 

    input { 
     position: absolute; 
     left: 0; 
     right: 0; 
    } 
</style> 

Answer 2

मान लें कि आपके पास फॉर्म में अपनी पंक्ति पर प्रत्येक इनपुट है, आप वांछित आकार में आकार विशेषता सेट कर सकते हैं लेकिन एक lso का एक सीएसएस जोड़ें:

input[type="text"] { 
    max-width: 100%; 
} 

यह सुनिश्चित करता है कि फ़ील्ड फॉर्म को ओवरफ़्लो नहीं करता है। यह दृष्टिकोण एक दृश्य क्यू देता है कि छोटे क्षेत्रों में कैप डालने के दौरान छोटे क्षेत्रों के लिए कितना डेटा अपेक्षित है (क्योंकि वे सही आकार होंगे)।