How can I equalize the heights of text input fields?
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 us开发者_JAVA百科er 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>).
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)
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.
Yes, you should use make all "text-based input fields use the border-box model".
This has already been answered in several other SO questions, such as here.
The fact that the WhatWG/W3c accepted the current border-box model is odd enough.
That they haven't done it consistently is even odder.
There is nothing wrong with overwriting the defaults to create a consistent design.
There is no other solution that is as reliable or as correct.
Maybe I'm off base but have you tried using line-height values?
加载中,请稍侯......
精彩评论