Question

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中，选择的高度很好，但文本val写在选择的顶部，而在webkit浏览器中，选择的高度不会改变。

有没有什么方法可以将这些选择和输入的样式设置为自定义高度，以便在大多数现代浏览器（firefox，webkit，opera，＆gt; = IE8可能？）中并排显示时并排放置？

Answer 1

众所周知，选择框可以抵御样式更改 - 即使您设法在一个浏览器中应用所需的外观，它几乎可以保证在另一个浏览器中不起作用。甚至不让我开始使用手机。

很多人最近一直在使用变通方法 - 隐藏<select>元素，并将其替换为使用javascript来模仿<select>行为的纯HTML结构。从那里开始，html比本地<select>更容易。

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

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

Answer 2

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

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

值得注意的是，根据我的经验，在Mac上，选择列表似乎没有任何高度或填充的注释，除非它们设置了一些border..类型的属性。

例如，

border: none;或border-radius: 0px;。似乎只需要一个才能生效

Answer 3

我刚开始使用display: table here：

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

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

input {
    height: 3em;
}

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

Answer 4

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

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

select{
/
}

如何使用自定义高度进行输入并选择看起来很漂亮？

4 个答案: