Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Align text and select boxes to the same width with HTML and CSS
When building forms in HTML, text inputs and select dropdowns often appear to have different widths even when the same width is applied in CSS. This happens because browsers handle the box model differently for different form elements, with padding and borders affecting the total rendered size.
The solution is to use the CSS box-sizing property set to border-box. This ensures that padding and borders are included within the specified width rather than added to it, making all form elements render at exactly the same visual width.
Syntax
Following is the syntax for the box-sizing property −
box-sizing: border-box;
For cross-browser compatibility, vendor prefixes may be needed −
-webkit-box-sizing: border-box; /* Safari/Chrome */ -moz-box-sizing: border-box; /* Firefox */ box-sizing: border-box; /* Standard */
How Box-Sizing Works
By default, CSS uses the content-box model where width and height only apply to the content area. Padding and borders are added outside this, making the total rendered size larger. With border-box, the width includes content, padding, and borders within the specified dimension.
Example − Aligning Text and Select Boxes
Following example demonstrates how to make text inputs and select boxes appear at exactly the same width −
<!DOCTYPE html>
<html>
<head>
<title>Aligned Form Elements</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
input, select {
width: 250px;
border: 2px solid #000;
padding: 5px;
margin: 10px 0;
height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
}
input {
text-indent: 3px;
}
</style>
</head>
<body>
<h2>Registration Form</h2>
<input type="text" placeholder="Name of Candidate">
<select>
<option>Select Role</option>
<option>Student</option>
<option>Teacher</option>
<option>Administrator</option>
</select>
<input type="email" placeholder="Email Address">
</body>
</html>
The output shows all form elements aligned to the exact same width −
Registration Form [Name of Candidate ] [Select Role ?] [Email Address ]
Without Box-Sizing Property
To understand the difference, here is the same form without the box-sizing property −
<!DOCTYPE html>
<html>
<head>
<title>Misaligned Form Elements</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
input, select {
width: 250px;
border: 2px solid #000;
padding: 5px;
margin: 10px 0;
height: 30px;
display: block;
/* No box-sizing property */
}
input {
text-indent: 3px;
}
</style>
</head>
<body>
<h2>Without Box-Sizing</h2>
<input type="text" placeholder="Name of Candidate">
<select>
<option>Select Role</option>
<option>Student</option>
<option>Teacher</option>
</select>
</body>
</html>
Without box-sizing, the elements appear misaligned because padding and borders are added to the 250px width −
Without Box-Sizing [Name of Candidate ] [Select Role ?] (Select box appears wider than text input)
Advanced Form Layout
Following example shows a more complete form using consistent box-sizing for professional alignment −
<!DOCTYPE html>
<html>
<head>
<title>Professional Form Layout</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
max-width: 400px;
margin: 0 auto;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, select, textarea {
width: 100%;
border: 1px solid #ddd;
padding: 8px;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
}
input:focus, select:focus, textarea:focus {
border-color: #007bff;
outline: none;
}
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Contact Form</h2>
<form>
<div class="form-group">
<label>Full Name:</label>
<input type="text" placeholder="Enter your name">
</div>
<div class="form-group">
<label>Department:</label>
<select>
<option>Choose department</option>
<option>Sales</option>
<option>Support</option>
<option>Development</option>
</select>
</div>
<div class="form-group">
<label>Message:</label>
<textarea rows="4" placeholder="Your message"></textarea>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
This creates a professional-looking form where all elements are perfectly aligned regardless of their padding or border styles.
Key Points
The
box-sizing: border-boxproperty ensures consistent sizing across different form elements.Include vendor prefixes (
-webkit-and-moz-) for better browser compatibility.Use
text-indenton inputs to fine-tune text positioning within the field.Apply the same height, padding, and margin values to maintain visual consistency.
The
display: blockproperty can help stack form elements vertically.
Conclusion
The box-sizing: border-box property is essential for creating uniform form layouts in HTML and CSS. It ensures that text inputs, select boxes, and other form elements render at exactly the same width, providing a professional and consistent user interface across different browsers and devices.
1K+ Views
