如何使用自定义高度使输入和选择看起来不错？答案

【问题标题】：how to make input and select look nice beside eachother with custom height?如何使用自定义高度使输入和选择看起来不错？
【发布时间】：2013-06-28 09:42:50
【问题描述】：

假设我有following html and style:

HTML

<div id="container">
    <input type="text"/>
    <select><option>val</option></select>
</div>

CSS

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

input, select {
    width: 50%;
    float: left;
    height: 3em;
    line-height: 3em;
}

如何使输入和选择看起来不错？在 Firefox 中，select 的高度很好，但文本 val 写在 select 的顶部，而在 webkit 浏览器中，select 的高度没有改变。

有没有什么方法可以在大多数现代浏览器（firefox、webkit、opera、>=IE8 可能？）并排放置时使用自定义高度设置这些选择和输入的样式？

【问题讨论】：

参考这些。 stackoverflow.com/questions/8189668/…stackoverflow.com/questions/9767612/…stackoverflow.com/questions/4561798/…

标签： html css

【解决方案1】：

众所周知，选择框无法更改样式 - 即使您设法在一个浏览器中应用了您想要的外观，也几乎可以保证它在另一个浏览器中不起作用。甚至不要让我开始使用移动设备。

最近很多人都在使用一种解决方法 - 隐藏 <select> 元素，并用纯 HTML 结构替换它，该结构使用 javascript 来模仿 <select> 行为。从那里开始，html 比原生 <select> 更容易设置样式。

有许多插件（在大多数 javascript 库中）可以做到这一点，但到目前为止，我发现最好的是 SelectBoxIt。它非常易于使用，具有通用浏览器和移动支持，并提供了一些非常高级的选项。唯一的问题是它需要 jQuery。

http://gregfranko.com/jquery.selectBoxIt.js/

【讨论】：

【解决方案2】：

你可以使用padding：http://jsfiddle.net/Ldftk/2/

似乎在我的 Firefox 中对其进行了排序，我也从来不是 line-height 的粉丝并删除了它。但是，如果您需要它，那就去吧。

另外值得注意的是，根据我的经验，在 mac 上，选择列表似乎不会注意高度或填充，除非它们设置了一些 border.. 类型属性。

border: none; 或 border-radius: 0px; 例如。似乎只需要一个即可生效

【讨论】：

okey，border-radius: 0 他们是否能够提升高度并且适用于 chrome/safari/webkit，很好！但在 mac 上的 Firefox 中，val 在您的小提琴中被水平切断。和border-radius: 0 使选择看起来很难看，所以也许有更好的Firefox 解决方案？
如果你增加高度，你应该能够阻止它切断 val。您当然可以使用边框半径的实际值而不是将其设置为 0，或者设置 border 属性
我更改了这个标题，但没有明确依赖两个元素的高度，并认为我自己找到了一个解决方案，display: table 让它们看起来更好。不过，感谢您对高度的帮助！

【解决方案3】：

我刚刚得到它与 display: table here 的工作方式：

#container {
    display: table;
    width: 20em;
}

input, select {
    width: 50%;
    display: table-cell;
    vertical-align: middle;
}

input {
    height: 3em;
}

选择的高度没有改变，但至少它与输入的文本垂直居中对齐。这样选择的样式是每个兄弟的常规样式，但看起来比中间不垂直对齐更好。

【讨论】：

【解决方案4】：

使用良好的重置 css 并像这样单独应用 css

input[type="text"]{
/*
style goes here
*/
}

select{
/
}

【讨论】：