I am facing an issue with aligning an input text box under a select element, where the input is intended to add new items to the select. I want both elements to have the same width, but my attempts have not been successful (as I do not wish to specify different widths due to varying browser and platform differences):
select, input {
min-width: 16em;
}
The text box appears to be six pixels wider than the select.
A suggestion from a forum post on recommended using content-box sizing for both elements instead of other defaults to achieve equal widths. While this helped slightly by increasing the select width by two pixels, the text box still remained four pixels wider:
select, input {
min-width: 16em;
box-sizing: content-box;
-moz-box-sizing: content-box;
}
I tried setting up a container with a width of 16em and applying "width: 100%;" to its children in hopes that they would be the same width. Unfortunately, this approach did not resolve the issue:
Are there any other solutions I could attempt to ensure both elements have equal widths? Currently, I am testing in Firefox 4.0b7 on Ubuntu 11.04 with the Darklooks GTK+ theme, but I am seeking a universal solution that works consistently across all platforms.