मैं HTML टेक्स्ट बॉक्स का आकार कैसे सेट करूं?

Question

मैं एक HTML टेक्स्ट बॉक्स का आकार कैसे सेट करूं?

Answer 1

बस का उपयोग करें:

textarea { 
    width: 200px; 
} 

या

input[type="text"] { 
    width: 200px; 
} 

आप 'पाठ बॉक्स' से क्या मतलब है पर निर्भर करता है।

Answer 2

आपका मार्कअप:

<input type="text" class="resizedTextbox" /> 

सीएसएस:

.resizedTextbox {width: 100px; height: 20px} 

मन पाठ बॉक्स आकार एक W3C box model के "शिकार" है कि में रखें। पीड़ितों का मेरा मतलब यह है कि टेक्स्ट बॉक्स की ऊंचाई और चौड़ाई ऊपर निर्दिष्ट असाइन/चौड़ाई गुणों का योग है, पैडिंग ऊंचाई/चौड़ाई और सीमा चौड़ाई के अतिरिक्त। इस कारण से, अलग-अलग ब्राउज़रों में डिफ़ॉल्ट पैडिंग के आधार पर आपके टेक्स्ट बॉक्स अलग-अलग ब्राउज़रों में थोड़ा अलग आकार होंगे। हालांकि विभिन्न ब्राउज़र टेक्स्ट बॉक्स में अलग-अलग पैडिंग को परिभाषित करते हैं, लेकिन अधिकांश reset style sheets<input /> टैग्स को रीसेट शीट में शामिल करने की आवश्यकता नहीं है, इसलिए यह ध्यान में रखना कुछ है।

आप अपने पैडिंग को परिभाषित करके इसे मानकीकृत कर सकते हैं। यहाँ निर्दिष्ट गद्दी के साथ अपने सीएसएस है, इसलिए पाठ बॉक्स सभी ब्राउज़रों में एक ही दिखता है:

.resizedTextbox {width: 100px; height: 20px; padding: 1px} 

मैं 1 पिक्सेल की पैडिंग जोड़ा क्योंकि कुछ ब्राउज़रों बनाने के लिए पाठ बॉक्स भी crammed देखो अगर गद्दी 0px है करते हैं। आपके डिज़ाइन के आधार पर, आप और भी पैडिंग जोड़ना चाह सकते हैं, लेकिन यह अत्यधिक अनुशंसा करता है कि आप पैडिंग को स्वयं परिभाषित करें, अन्यथा आप इसे स्वयं के लिए तय करने के लिए अलग-अलग ब्राउज़रों तक छोड़ देंगे। ब्राउज़रों में और भी स्थिरता के लिए, आपको सीमा को स्वयं परिभाषित करना चाहिए।

Answer 3

तत्वों को height और width विशेषताओं के साथ आकार दिया जा सकता है।

Answer 4

input[type="text"] 
{ 
    width:200px 
} 

Answer 5

प्रयास करें:

input[type="text"]{ 
padding:10px 0;} 

इस तरह यह क्या textsize पाठ बॉक्स के लिए निर्धारित किया गया है की स्वतंत्र रहता है। आप गद्दी ऊंचाई का उपयोग कर वृद्धि हो रही है बजाय

Answer 6

इस कोड का प्रयास करें:

input[type="text"]{ 
padding:10px 0;} 

इस तरह यह क्या textsize पाठ बॉक्स के लिए निर्धारित किया गया है की स्वतंत्र बनी हुई है। आप बजाय पैडिंग का उपयोग कर ऊंचाई बढ़ा रहे हैं।

Answer 7

आपका पाठ बॉक्स कोड:

<input type="text" class="textboxclass" /> 

आपका सीएसएस कोड:

input[type="text"] { 
height: 10px; 
width: 80px; 
} 

या

.textboxclass { 
height: 10px; 
width: 80px; 
} 

तो, पहले आप अपने तत्व विशेषताओं के साथ चयन (प्रथम उदाहरण देखें) या कक्षाएं (अंतिम उदाहरण देखें)। बाद में, आप अपने तत्व को ऊंचाई और चौड़ाई मान निर्दिष्ट करते हैं।

Answer 8

यह आईई 10 में मेरे लिए काम करता है और एफएफ 23

<input type="text" size="100" /> 

Answer 9

आप वर्ग विधि आप पाठ बॉक्स में परिवर्तन करने के लिए अभिभावक-बच्चे विधि का उपयोग कर सकते हैं का उपयोग नहीं करना चाहते हैं।

उदाहरण के लिए। मैंने अपने फॉर्म div में एक फॉर्म बनाया है।

एचटीएमएल कोड:

<div class="form"> 
<textarea name="message" rows="10" cols="30" >Describe your project in detail.</textarea> 
</div> 

अब सीएसएस कोड तरह होगा:

.form textarea{ 
    height: 220px; 
    width: 342px; 

समस्या को हल किया।

Answer 10

लुकआउट! चौड़ाई विशेषता अधिकतम चौड़ाई विशेषता द्वारा क्लिप किया गया है। तो मैं इस्तेमाल किया ....

<form method="post" style="width:1200px"> 
    <h4 style="width:1200px">URI <input type="text" name="srcURI" id="srcURI" value="@m.SrcURI" style="width:600px;max-width:600px"/></h4> 

Answer 11

आप सीमित करना चाहते हैं नहीं: पत्र पाठ बॉक्स में इस का उपयोग की: इनपुट टैग के अंदर maxlength = "10"