HTML में इनपुट टेक्स्ट बॉक्स का आकार कैसे परिभाषित किया जा सकता है?


90

यहाँ एक HTML इनपुट टेक्स्ट बॉक्स है:

<input type="text" id="text" name="text_name" />

बॉक्स के आकार को परिभाषित करने के लिए क्या विकल्प हैं?

इसे CSS में कैसे लागू किया जा सकता है?



कुछ मामलों में बस सेटिंग max-widthपर्याप्त है
क्रिस्टोफ रूसो

जवाबों:


129

आप इसे सेट कर सकते हैं width:

<input type="text" id="text" name="text_name" style="width: 300px;" />

या इससे भी बेहतर एक वर्ग को परिभाषित करें:

<input type="text" id="text" name="text_name" class="mytext" />

और एक अलग सीएसएस फ़ाइल में आवश्यक स्टाइल लागू करें:

.mytext {
    width: 300px;
}

यदि आप उन वर्णों की संख्या को सीमित करना चाहते हैं जिन्हें उपयोगकर्ता इस टेक्स्टबॉक्स में टाइप कर सकता है, तो आप maxlengthविशेषता का उपयोग कर सकते हैं :

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />

11
यह भी: आप "एम" (और "पीएक्स" नहीं) के संदर्भ में चौड़ाई बदल सकते हैं और फिर आकार टेक्स्ट बॉक्स के फ़ॉन्ट-आकार के लिए आनुपातिक है
अलेक्जेंडर बर्ड


8

इसे इस्तेमाल करे

<input type="text" style="font-size:18pt;height:420px;width:200px;">

वरना

 <input type="text" id="txtbox">

सीएसएस के साथ:

 #txtbox
    {
     font-size:18pt;
     height:420px;
     width:200px;
    }

3
आपका उत्तर नया कुछ नहीं जोड़ता है और आपको इकाइयों (px, pt,% v, आदि) को css में निर्दिष्ट करना चाहिए
जॉन पी।

1
अच्छा- फ़ॉन्ट-आकार (शैली = "फ़ॉन्ट-आकार: 18pt") वह था जिसकी मुझे तलाश थी और वह बॉक्स के आकार को भी बढ़ाता है। हालांकि ओपी द्वारा स्पष्ट रूप से नहीं पूछा गया है, यह मूल्य भी जोड़ता है।
वुल्फ 5

यह काम किया। इसलिए बहुत बहुत धन्यवाद। हालाँकि यह पाठ अपने आप को लंबवत रूप से केन्द्रित करता है। क्या मैं इसे किसी भी तरह से रोक सकता हूं?
एरोन जॉन साबू

@AaronJohnSabu देरी के लिए क्षमा करें .. चौड़ाई का आकार बढ़ाने का प्रयास करें .. आशा है कि आपको पहले से ही उत्तर मिल गया है
जनार्दन रामू

3

आप इनलाइन स्टाइल के माध्यम से पिक्सेल में चौड़ाई सेट कर सकते हैं:

<input type="text" name="text" style="width: 195px;">

आप दृश्यमान लंबाई के साथ चौड़ाई भी सेट कर सकते हैं:

<input type="text" name="text" size="35">

-2
<input size="45" type="text" name="name">

"आकार" तत्व इनपुट के वर्णों में दृश्यमान चौड़ाई को निर्दिष्ट करता है।

आप सीएसएस से ऊंचाई और चौड़ाई का उपयोग भी कर सकते हैं।

<input type="text" name="name" style="height:100px; width:300px;">
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.