2

假设我有以下 html 和 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 中，选择的高度很好，但文本val写在选择的顶部，而在 webkit 浏览器中，选择的高度没有改变。

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

4

4 回答 4

1

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

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

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

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

于 2013-06-28T15:36:35.310 回答
0

我刚刚让它在display: table 这里工作：

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

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

input {
    height: 3em;
}

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

于 2013-06-28T10:39:32.087 回答
0

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

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

select{
/
}
于 2013-06-28T13:21:50.970 回答
0

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

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

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

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

于 2013-06-28T09:49:17.740 回答