2013-12-18 31 views

回答

22

我碰到的實際工作,如果任何人機會碰到這個問題又來這個其他的答案。

How to standardize the height of a select box between Chrome and Firefox?

基本上你改變元素的外觀定義,那麼你可以添加的風格吧。

.className { 
    -webkit-appearance: menulist-button; 
    height: 50px; 
} 

爲我工作,但它確實改變了元素的邊界。只要確保跨瀏覽器在更改後檢查它,並確保邊框樣式仍然可以接受。

1

對我來說這並獲得成功:

select { 
    font: inherit; 
} 
0

由於優先考慮內聯樣式,你可以用這種伎倆來增加你的選擇列表的高度。你所要做的就是在select標籤中添加內聯風格。

<!-----------If you are using Bootstrap ----------> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<body> 
 

 
<div class="container"> 
 
    <form> 
 
    <div class="form-group"> 
 
     <label for="sel1">Select list (select one):</label> 
 
     <select class="form-control" style=" height:50px;" id="sel1"> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
     </select> 
 
     </div> 
 
    </form> 
 
    </div> 
 
    </body> 
 

2

我希望這對你的作品

只給一個高度的選項在樣式表使您可以輕鬆地與期權的行數計算選擇字段的高度

<style>select>option{height:20px;}</style> 

並根據需要在腳本標記中添加此功能或者僅複製此文件

<script>function myFunction() { 
var x = document.getElementById("mySelect").length; 
var y = 20 * x +10; 
document.getElementById("mySelect").style.height = y+"px";}</script> 

主體部分

<body onload="myFunction()"><select id="mySelect" multiple="multiple"><option>Apple</option>option>Pear</option><option>Banana</option><option>Orange</option><option>Banana</option></select></body>