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;
}
I suggest adding this 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 okay, but play around with it. This should help with the text baselines.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With