HTML और CSS के साथ टेक्स्ट और सेलेक्ट बॉक्स को समान चौड़ाई में संरेखित करें

बॉक्स साइज़िंग समस्या

डिफ़ॉल्ट रूप से (box-sizing: content-box), किसी तत्व की width और height केवल सामग्री क्षेत्र पर लागू होती है। पैडिंग और बॉर्डर बाहर जुड़ जाते हैं, जिससे तत्व अपेक्षा से बड़ा दिखाई देता है।

समाधान: box-sizing: border-box

box-sizing: border-box सेट करने से पैडिंग और बॉर्डर घोषित चौड़ाई/ऊंचाई के अंदर शामिल हो जाते हैं, जिससे तत्वों का आकार पूर्वानुमेय रहता है।

उदाहरण: इनपुट और सेलेक्ट को समान चौड़ाई देना

<!DOCTYPE html>
<html>
<head>
    <style>
        /* सभी फॉर्म तत्वों के लिए बॉक्स साइज़िंग रीसेट */
        *, *::before, *::after {
            box-sizing: border-box;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        input, select {
            width: 100%;
            max-width: 300px;
            padding: 10px 12px;
            border: 2px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            font-family: inherit;
            /* box-sizing: border-box पहले से लागू है */
        }
        
        input:focus, select:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
        }
        
        /* सेलेक्ट के लिए कस्टम तीर (वैकल्पिक) */
        select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 40px;
        }
    </style>
</head>
<body>
    <form>
        <div class="form-group">
            <label for="name">उम्मीदवार का नाम</label>
            <input type="text" id="name" value="उम्मीदवार का नाम">
        </div>
        
        <div class="form-group">
            <label for="role">भूमिका चुनें</label>
            <select id="role">
                <option value="">विकल्प चुनें</option>
                <option value="student">छात्र</option>
                <option value="teacher">शिक्षक</option>
                <option value="head">प्रधानाध्यापक</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="email">ईमेल</label>
            <input type="email" id="email" placeholder="email@example.com">
        </div>
    </form>
</body>
</html>

पुराने ब्राउज़र्स के लिए वेंडर प्रीफिक्स

input, select {
    -webkit-box-sizing: border-box;  /* Safari 5, iOS 5, Android Browser */
    -moz-box-sizing: border-box;     /* Firefox 1-28 */
    box-sizing: border-box;          /* मानक: Firefox 29+, Chrome 10+, Safari 5.1+, IE8+ */
}

वैश्विक रीसेट (अनुशंसित)

अपने CSS की शुरुआत में यह जोड़ें ताकि सभी तत्व सुसंगत व्यवहार करें:

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

अतिरिक्त संरेखण युक्तियाँ

• फ्लेक्सबॉक्स का उपयोग करके लेबल और इनपुट को संरेखित करें
• vertical-align: middle इंलाइन तत्वों के लिए
• display: flex; align-items: center कंटेनर पर
• font-family: inherit इनपुट्स पर ताकि फॉन्ट सुसंगत रहे

फ्लेक्सबॉक्स लेआउट उदाहरण

.form-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.form-row label {
    flex: 0 0 120px;  /* निश्चित लेबल चौड़ाई */
    font-weight: 500;
}

.form-row input,
.form-row select {
    flex: 1;          /* शेष स्थान भरें */
    max-width: none;  /* max-width बाधा हटाएँ */
}