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, and I also 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, which has this code:

<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>

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

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; }