<input> and <select> widths

I am trying to put an input text box under a select, where the input is used to add new items to the select. Naturally, I want them the same width. However, this doesn't seem to work (I don't want to set different widths, because the differ开发者_JAVA百科ence needed may vary across browsers and platforms):

select, input {
 min-width: 16em;
}

The text box is six pixels wider than the select.

A forum post at http://forums.mozillazine.org/viewtopic.php?f=25&t=1555685 recommended that forcing content-box sizing on both (rather than border-box or other defaults) would make them the same. This helped a bit, increasing the select width by two pixels, but the text box is still four pixels wider:

select, input {
 min-width: 16em;
 box-sizing: content-box;
 -moz-box-sizing: content-box;
}

A thing I thought to try out was have a container with the 16em width and set its two children to width: 100%;, in the hope that they would be the same width. Unfortunately, that didn't work either:

Any other fixes I can try to make them the same width? I'm currently testing in Firefox 4.0b7 on Ubuntu 11.04 with the Darklooks GTK+ theme, though of course, I want a solution that works equally everywhere.

on the wrap div you can add display: -moz-groupbox;

live example: http://jsbin.com/alixi5

Do you have 1 pixel of left and right padding on the text input?

FireFox on a Mac they look the same width to me.

Put them inside a div with the width you want, and assign 100% width to both the select and input.

Edit 1 The following code works in my computer^tm

<div style="width: 400px">
<select style="width:100%" multiple="multiple">
    <option>Value1</option>
    <option>Value2</option>
    <option>Value3</option>
    <option>Value4</option>
</select>
<input type="text" style="width:100%">