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

Question

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

Answer 1

महज प्रयोग करें:

textarea {
    width: 200px;
}

या

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

'टेक्स्टबॉक्स' से आपका क्या मतलब है, इसके आधार पर।

Comments

नोट: सिर्फ बटन की तरह inputअन्य inputनियंत्रणों का भी आकार परिवर्तन करेगा

— होमर

एक टेक्स्टबॉक्स है <input type="textbox" />और एक टेक्स्टारिया है <textarea></textarea>इसमें अंतर है।

— माइकल गैरीसन

आप इसे% में कैसे करते हैं?

— एक कोडर

@MichaelGarrison आपका मतलब है type="text"? type="textbox"कहीं भी परिभाषित नहीं किया जा सकता: w3.org/TR/html5/forms.html#states-of-the-type-attribute

— Stefan L

हां, type="text"मेरा क्या मतलब है, मुझे लगता है कि मैंने बस जल्दी में लिखा था

— माइकल गैरीसन

Answer 2

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

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

सीएसएस:

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

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

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

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

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

Answer 3

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

Answer 4

आपका टेक्स्टबॉक्स:

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

आपका CSS कोड:

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

या

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

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

Comments

आपके सुझाव के लिए धन्यवाद। मैंने इसे पहले ही संपादित कर दिया है। मैं बेहतर सवाल पूछने की कोशिश करूंगा।

— रोशनीबुल

Answer 5

यह IE 10 और FF 23 में मेरे लिए काम करता है

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

Comments

नहीं, यह बहुत समय तक काम नहीं करेगा उदाहरण के लिए वर्तमान क्रोम उर्फ ​​सबसे लोकप्रिय ब्राउज़र सर्का 2015

— टॉम स्टिकेल

भविष्य में कोई भी इसे पढ़ रहा है, FYI करें, क्रोम 58 सर्का मिड 2017 में ठीक काम करता है।

— रिक

Answer 6

यदि आप क्लास विधि का उपयोग नहीं करना चाहते हैं, तो आप टेक्स्ट बॉक्स में परिवर्तन करने के लिए पैरेंट-चाइल्ड पद्धति का उपयोग कर सकते हैं।

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

HTML कोड:

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

अब CSS कोड इस तरह होगा:

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

समस्या सुलझ गयी।

Answer 7

बाहर देखो! चौड़ाई विशेषता को अधिकतम-चौड़ाई विशेषता द्वारा क्लिप किया गया है। तो मैंने इस्तेमाल किया…।

    <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 8

प्रयत्न:

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

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

Answer 9

इस कोड को आज़माएं:

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

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

Answer 10

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

Answer 11

आप निर्भर इनपुट चौड़ाई बनाम कंटेनर चौड़ाई बना सकते हैं।

.container {
   width: 360px;
}

.container input {
   width: 100%;
}