選擇框樣式通過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並且它'出現'。我推測你要求更多。在這個高度之後，你還要求它看起來像什麼？