将选择和输入的高度设置为相等的最佳实践方法

时间:2010-06-11 05:54:37

标签: html css

默认选择与输入(文本字段)相比具有更小的高度。是否有一种最佳实践方法来设置选择和输入的高度,使用相同的字体大小相互相等?

1 个答案:

答案 0 :(得分:1)

这是一个很好的问题,因为它与我们日常的CSS写作练习有关。我建议为要使用类似字体的元素设置相同的类。


就选择框的高度而言,如果你使用height:Xpx css属性,那么它会从底部放置大约X像素的填充,因此你的选择框看起来很奇怪。因此,对于设置选择框的高度,你应该使用padding:css属性并为顶部和底部添加相同的填充,例如填充:3px 0px将从顶部和底部放置3px的填充,并在中间设置选择框的文本。这在mac上看起来要好得多,但是在最右边的Windows PC下拉按钮看起来很奇怪,因为它不会为padding属性调整大小。


最佳解决方案是结合两种技巧,即设置选择框的高度,并从顶部放置填充,直到它在中间对齐。


在大多数高级网站中使用的另一种方法是使用ul来制作自定义选择框并放置自定义样式。这是教程http://gerrendesign.com/weblog/2009/06/how_to_make_custom_select_boxe.php