选择框样式通过CSS

Question

我有一个问题，通过CSS选择框的样式。它应该看起来像放在我的页面中的另一个。这里是我当前代码的一个例子。

<select> 
    <option selected="selected" value="1">1</option> 
    <option value="2">2</option> 
</select> 
<br> 
<input type="text" style="width:35px;margin-right:0px;"> 
<input type="text" style="width:180px;"> 

而且这里的CSS我使用：

input[type=text], textarea, select{ 
    border: 1px solid #cccccc; 
    font:10px sans-serif; 
    background-color: #ffffff; 
    width: 240px; 
    height:14px; 
    padding:5px; 
    color: #101010; 
} 

在这里你可以找到问题的小提琴如果得了：http://jsfiddle.net/6VGWc/。选择框是“不可见的”。我希望你能帮助我。需要

Answer 1

我并不完全相信你的问题是什么，但加入了box-sizing规则使得内容（select元素的第一个选项）可见：

-moz-box-sizing: content-box; /* for Firefox/Gecko browsers */ 
-webkit-box-sizing: content-box; /* for Webkit-based browsers, Safari, Chrome, Chromium... */ 
-o-box-sizing: content-box; /* for Opera */ 
box-sizing: content-box; /* or 'padding-box' or 'border-box' */ 

Updated JS Fiddle demo。

请注意，设计一个select盒子通常很难做到跨浏览器，因为它们往往只是被操作系统提供/处理的替代元素（很像img），而不是浏览器本身。

但是，如果您选择向该元素声明特定的height（或min-height），这可以起作用，但如果您的样式随后发生变化，则可能会更难以管理。

Answer 2

选择框的高度，以不同的方式设置为文本框。

设置选择框的高度27px使得相同的高度的文本框我。

Working Example

Answer 3

你的身高为选择设置过小。我添加了

select{ 
height: 27px; 
} 

到您的CSS并且它'出现'。我推测你要求更多。在这个高度之后，你还要求它看起来像什么？