How to align input and select form elements in one row

Question

How can I align the input and select form elements in my test case, so that their horizontal borders are aligned and all text including labels is aligned to the baseline?

I want to have a label and an input form element along with another label and a select form element in one row. Therefore I want to have horizontal borders of select and input elements aligned as well as I want to have all text including labels aligned to the baseline. Is it possible?

I was unable to achieve it on IE8 or FF on Win. I tried box-sizing: border-box; to force input and select to be rendered using the same box model.

See my test case or here is the sample:

<form action="Submit" method="post">
<p>
    <label>Sex<select><option value="" selected="selected">Sex</option></select></label>
    <label>Date of Birth<input type="text" value="Date of Birth" /></label>
</p>
</form>

And css:

body, input, select {
    font-family:Helvetica,Arial,sans-serif;
    font-size: 12px;
}

select, input {
    height: 20px;
    padding: 0;
    margin: 0;
    border: 1px solid gray;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

label {
    padding: 0;
    margin: 0;
}

Answer 1

I suggest adding a style to the select and input elements

• vertical-align: bottom;

you can add padding to the select element. however, you will get some whitespace around the drop-down arrow. 2px should be ok, but play around with it. This should help with the text baselines

Hope that helps!

Answer 2

It seems that when I do not set the height of select and input elements then setting the border to 1px gets it aligned. I do not change the default vertical-align: baseline to keep the text baselines aligned. I made it too complicated before. This short CSS did it:

body, input, select {
  font-family:Helvetica,Arial,sans-serif;
  font-size: 12px;
}

select, input { border: 1px solid gray; }