Aligning text and select boxes to the same width in CSS?
CssHtmlTextboxDrop Down-MenuCss Problem Overview
Ok this is seemingly impossible to get right. I have a text box and a select box. I want them to be the same width exactly so they line up on the left margin and the right margin.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
</select>
</body>
</html>
That would do it you think, right? Nope. The select box is 6px shorter in Firefox. See screenshot. 
Ok so lets edit the code and make two styles.
<style type="text/css">
input {
width: 200px;
}
select {
width: 206px;
}
</style>
Ok that works!
Oh wait, better test in Chrome...
Can someone tell me how to line these up in all browsers? Why can't I just do width: 200px on all, why do all the browsers display it differently? Also while we're at it why is the text box and select box different heights? How do we get them to the same height? Have tried height and line-height no no avail.
Solution:
Ok I've found the solution with some help from the answers below. The key is to use the box-sizing: border-box property so when you specify the width that includes the border and padding. See excellent explanation here. Then the browser can't stuff it up.
Code is below, have also set the height of the boxes to the same size and indented the text inside the box so it lines up. You also need to set the border as Chrome has a really weird looking border it uses for select boxes which will throw out the alignment. This will work for HTML5 sites (e.g. supporting IE9, Firefox, Chrome, Safari, Opera etc).
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
border: 1px solid #000;
padding: 0;
margin: 0;
height: 22px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
text-indent: 4px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
<option>123456789 123123123123</option>
<option>123456789 123123123123 134213721381212</option>
</select>
</body>
</html>
Just one final warning you may not want input buttons, checkboxes etc to be included in this styling so use the input:not([type='button']) to not apply it to certain types or use input[type='text'], input[type='password'] to specify ones you do want it to apply to.
Css Solutions
Solution 1 - Css
This is because the <input type="text" /> element has a slightly different default style to the <select> element e.g. the border, padding and margin values may be different.
You can observe these default styles through an element inspector such as Firebug for Firefox or the built-in one for Chrome. Futhermore, these default stylesheets differ from browser to browser.
You have two options:
- Explicitly set the border, padding and margin values to be the same for both elements
- A CSS reset stylesheet to be included before your own CSS stylesheets
I would go with option 1. because option 2. requires a lot of work and you'll end up with tons of unnecessary CSS. But some web developers prefer to start from scratch and have complete control.
Solution 2 - Css
This will get you close, but that level of precision is nearly impossible.
<div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div>
<div style="width: 200px">
<select id="Select1" style="width: 100%; margin: 0; padding: 0">
<option>1</option>
</select>
</div>
Solution 3 - Css
Different browsers apply different styles by default. I found that resetting both margin and padding to 0 makes both elements equal widths in both Firefox and Chrome.
<html>
<head>
<title>Test</title>
<style type="text/css">
input, select {
margin: 0;
padding: 0;
width: 200px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br />
<select>
<option>123</option>
</select>
</body>
</html>
I personally like to use a minimal CSS reset stylesheet like YUI CSS Reset before attempting to make a design look great in multiple browsers.
Solution 4 - Css
Add a class to both the select and input tags in question ie:
<input class='custom-input'/>
<select class='custom-input'></select>
then modify the css below to fit your design:
.custom-input {
width:140px;
border:1px solid #ccc;
margin:1px;
padding:3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
}
obvs this is a fix for supporting browsers
Solution 5 - Css
If u use tables 4 inputs u could use the following solution - also compatable with ie7:
<tr style="width:1px;"><td style="width:inherit;position:relative;">
<select style="width:100%;">
</select>
</td></tr>
<tr><td>
<input type="text" style="width:150px;"/>
</td></tr>
That way the table cell width will be fixated to the width of the input,
And that way the select would therefore always take the remaining width and perfectly line up with d input.
Solution 6 - Css
Try removing the default borders from both elements:
select, input {
border:0;
}
Solution 7 - Css
Yes, extremely frustrating. However, I never had problems with that 'till I put a "<!DOCTYPE html>" tag at the top of my HTML page. My webpage rendered properly on all platforms that I could test until I put that tag at the top of my document.
While that's "genuine spec", it seems to be the source of these alignment problems. FWIW, I'm using HTML5 elements, in-line CSS, etc., all without that tag to specify HTML5. YMMV.