CSS 表单中输入和选择标签高度的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9767612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Issue with Input & Select tag height in form
提问by Shailender Arora
I am making a form. When I give the same height and width to <input>and <select>tags, the <select>tag is not taking the same height as the <input>.
我正在制作表格。当我为<input>和<select>标签提供相同的高度和宽度时，标签<select>的高度与<input>.
There seems to be one pixel difference in height.
What's the problem?
高度上似乎有一个像素差异。
有什么问题？
input {
width: 100px;
height: 20px;
vertical-align: top;
}
select {
border: 1px solid #ccc;
vertical-align: top;
}
option {
color: red;
width: 100px;
height: 20px;
text-decoration: underline;
}<input type="text">
<select>
<option>first option</option>
<option>second option</option>
</select>回答by sandeep
You have to give height to your select& give box-sizingproperty for this also.
您还必须为此赋予高度并为此select赋予box-sizing财产。
select {
border:1px solid #ccc;
vertical-align:top;
height:20px;
}
input, select{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
Check this http://jsfiddle.net/RCnQa/16/
检查这个http://jsfiddle.net/RCnQa/16/
Works on IE8 & above.
适用于 IE8 及以上。
回答by Fabrizio Calderan
try using box-sizing:
尝试使用box-sizing：
input, select, option {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input, select {
width:100px;
height:20px;
border : 1px #ccc solid;
vertical-align:top;
}
example fiddle: http://jsfiddle.net/RCnQa/17/
示例小提琴：http: //jsfiddle.net/RCnQa/17/
回答by Farman Ahmed
Just use form-control class in select if you are using bootstrap.
如果您使用引导程序，只需在选择中使用表单控制类。
<select class="form-control">
回答by digitebs
they will never be equal visually, you can update select css using the below:
它们在视觉上永远不会相等，您可以使用以下内容更新 select css：
select {
border:1px solid #cccccc;
vertical-align:top;
height:23px;
}
回答by Vijay Sarin
I had the same problem with select box in one of my projects. I fixed it by changing the Arrow of the select box as stated here,
我在我的一个项目中遇到了与选择框相同的问题。我通过更改此处所述的选择框的箭头来修复它，
http://bavotasan.com/2011/style-select-box-using-only-css/
http://bavotasan.com/2011/style-select-box-using-only-css/
I hope this helps.....
我希望这有帮助.....
回答by Simon_Weaver
Even on the latest Chrome as of 11/21/17 it still seems necessary to set a fixed height on the select.
即使在 2017 年 11 月 21 日发布的最新 Chrome 上，似乎仍然有必要在选择上设置固定高度。
I prefer to set a min-heightbecause it just feels nicer to me, plus there are all kinds of plugins that can mess with font sizes that you may not account for. This is a little safer to avoid cropping.
我更喜欢设置 amin-height因为它对我来说感觉更好，而且有各种插件可能会弄乱您可能无法考虑的字体大小。这样可以更安全地避免裁剪。
padding: .25rem .5rem;
min-height: 2.5rem;
font-size: 1.1em;
Note: Can reduce vertical padding since we now are forcing a height.
注意：可以减少垂直填充，因为我们现在正在强制一个高度。
Use ems for paddingand min-heightif you want the height to change when font size changes.
使用EMS的padding和min-height如果你想要的高度变化时，字体大小的更改。
