How to line up HTML input elements?

Question

I am hoping to find a resource for lining up input elements in a HTML page. I find it difficult to get a select element and a text box to be the same width even when using t

Answer 1

File inputs can be fundamentally different across browsers and definitely don't allow much in the way of customization, which can be annoying, but I also understand why that is from a security perspective. For example, try changing the text of the "browse" button that appears on most browsers, or compare the file input on Safari to other browsers...

Answer 2

Other than width, I'd be setting border and margin too, these may or may not influence your controls. Something like this may help:

input, select {
    width: 100px;
    margin: 0px;
    border: 1px solid;
}

Ron has a good idea too.

Answer 3

This is because with an <input>, the border and padding is added on to the width (like with most other elements). With a <select>, the border and padding is included in the width, just like in the old IE quirks mode.

You can get round this by increasing the width to take account of this:

input  { width: 200px; padding: 10px; border-width:5px; }
select { width: 230px; padding: 10px; border-width:5px; }

Or (if you can rely on browser support) you can use the new CSS3 box-sizing property to make them behave consistently, and draw padding and border outside of the element width:

input, select {
  width: 200px;
  padding: 10px;
  border-width:5px;
  -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: content-box;    /* Firefox, other Gecko */
  box-sizing: content-box;         /* Opera/IE 8+ */
}

Alternatively, you can set box-sizing to border-box to make the inputs behave like the selects, with padding drawn inside the width of the box.

Tested in Chrome, IE8, FF

Answer 4

I usually put them inside a div or table cell (horrors! I know) of the width I want, then set the select and input style:width to 100% so they fill the div / cell they are in.

Answer 5

If you desperately need { width: 100%; } and not specified with widths in pixels, then jQuery is your friend:

$(function () {
    var allSelects = $('input[type="text"], textarea');
    allSelects.css('width', (allSelects.width()-6)+'px');
}

-6 pixels works best for me (FF9), edit as you see fit.

Answer 6

I found that if you set select and input element border and padding to 0, they are same width. (Tested on Chrome 14, Firefox 7.0.1, Opera 11.51, IE 9)

Putting 1px border/padding on select and input elements makes input element 2 pixels wider. For example:

<form class="style">
    <input name="someInput" />
    <select name="options">
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
    </select>
</form>

.style select {
    width: 100px;
    padding: 1px;
    border: 1px solid black;
}
.style input {
    width: 96px; /* -2 px for 1px padding(1px from each side) and -2px for border
    (select element seems to put border inside, not outside?) */
    padding: 1px;
    border: 1px solid black;
}