2013-12-18 2 views
9

Без использования каких-либо плагинов, как я могу увеличить высоту окна <select> в CSS? Я пробовал line-height, но это не сработало для меня.Как стиль (увеличение высоты) окна выбора в CSS?

Благодаря

+0

Просто используйте высоту? Или добавьте дополнение к элементам '

ответ

22

Я наткнулся на этом другой ответ, который на самом деле работает, если кто-либо шансы по этому вопросу еще раз.

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

В основном изменения определения внешнего вида элемента, то вы можете добавить стиль к нему.

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

Работал для меня, но он меняет границу на элемент. Просто убедитесь, что кросс-браузер проверяет его после изменения и гарантирует, что стилизация границ по-прежнему приемлема.

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> 
Смежные вопросы