Textarea और इनपुट अलग चौड़ाई

Question

है

सीएसएस:

textarea, input { 
    width:300px; 
} 

HTML:

<textarea id="input"></textarea> 
<br> 
<input type="submit"> 

लाइव डेमो: http://codepen.io/qaz/pen/teaiG

क्यों अलग चौड़ाई के साथ इनपुट और पाठ क्षेत्र प्रदर्शन करते हैं? उन्हें एक ही चौड़ाई बनाने के लिए जोड़ने के लिए मुझे किन संपत्तियों की आवश्यकता है?

अद्यतन: 0px पर सीमा और पैडिंग सेट करके, मैं उन्हें एक ही चौड़ाई पर प्रदर्शित कर सकता हूं। कोई भी पैडिंग नहीं चाहता: 0px, हालांकि, और अजीब बात यह है कि जब पैडिंग है, तो कहें, दोनों के लिए 10px, वे अब भी एक ही चौड़ाई नहीं हैं। अब मुझे पैडिंग के साथ समाधान मिला है: 0 पीएक्स, मुझे अभी भी एक स्पष्टीकरण और समाधान में रूचि है जो मुझे अभी भी पैडिंग करने की अनुमति देता है।

(मैं Windows 7 पर क्रोम 35 उपयोग कर रहा हूँ)

Answer 1

इस तरह यह स्थापित करने का प्रयास करें:

textarea, input { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

http://jsfiddle.net/QV9PE/

बॉक्स आकार का CSS3 संपत्ति सिर्फ यह कर सकती है। सीमा-बॉक्स मान (सामग्री-बॉक्स डिफ़ॉल्ट के विपरीत) अंतिम प्रस्तुत बॉक्स को घोषित चौड़ाई, और बॉक्स के अंदर किसी भी सीमा और पैडिंग काट देता है।

अब हम अपने टेक्स्टरेरा को 300px चौड़ाई के रूप में सुरक्षित रूप से घोषित कर सकते हैं, जिसमें पिक्सेल-आधारित पैडिंग और सीमा शामिल है, और पूरी तरह लेआउट पूरा कर सकते हैं।

Answer 2

निम्नलिखित सीएसएस और एचटीएमएल का प्रयास करें। मैं सैद्धांतिक जवाब नहीं जानता, लेकिन यहाँ एक व्यावहारिक समाधान है: http://codepen.io/anon/pen/BGeci

सीएसएस:

textarea, input { 
    width:300px; 
} 

input[type=submit] { 
    width:306px; 
} 

HTML:

<textarea id="input"></textarea><br> 
<input type="text" id="input2"></textarea><br> 
<input type="submit">