Menu
What is the best way to equalize the height of my <select..> elements and my <input type="text"..> elements? It's proving difficult because of differences in box-sizing models.
Google Chrome's user agent stylesheet has this:
select { -webkit-box-sizing: border-box; }
..whereas other text input fields use the content box model. Why the difference? Should I perhaps make all of my text-based input fields use the border-box model?
BTW, I'm using standards-compliant mode (by using <!DOCTYPE html>).
673
If you want to increase the height of the input field, you can specify line-height css property for the input field.
Yeah.. this is extremely difficult.
Dont forget that there are issues with firefox treating form elements differently as well.
cross browser form manipulation is impossible at best. :D
Some things to note. line-height can't be used on all elements.. ie. firefox hard codes a line height to input[type=text] elements.
I have an article on using inline-block and vertical align, which may help some.. (use verital-align:baseline;) The Joys of Inline Block at screwlewse.com
Also keep in mind that many newer browsers have this added chrome to make the form inputs to look more like the OS. (but that looks like a different issue)
58
How about?
select {padding: 1px;}
Couldn't you just explicitly set the hight of all input and select fields to a specific pixel height using CSS? If it doesn't "look" like the same height because of borders, remove the borders or set them all uniformly in the same way. For example:
<html>
<body>
<input type=text style="border: 1px solid black; height: 37px;">
<select style="border: 1px solid black; height: 37px; line-height: 37px; font-size: 28px;"></select>
<input type=button style="border: 1px solid black; height: 37px;">
</body>
</html>
This makes all three form fields 37 pixels high. Works on IE and Chrome, but I haven't tested it elsewhere.
Alternately, once the page has loaded, loop through all form fields, find the largest one, and set the hight of the others using their style.height attribute.
37
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
