Menu
Without using any plugins, how can I increase the height of the <select> box in CSS?
I tried line-height but it didn't work for me.
462
Answer: Use the CSS :focus pseudo-class By default the size of the <select> element is depend on the size of the largest <option> text. However, sometimes it is useful to set a fixed width to the select box and increase its size back to the original size when the user tries to select some option (i.e. on focus).
You just need to use the height CSS attribute for the select tag.
There are many ways to design a <select> dropdown menu using CSS. The Dropdown Menu is mainly used to select an element from the list of elements. Each menu option can be defined by an <option> element that can nested inside the <select> element.
To hide the default arrow of the <select> dropdown, set the CSS appearance property to its "none" value, then add your individual arrow with the help of the background shorthand property.
I came across this other answer that actually works, if anyone chances across this question again.
How to standardize the height of a select box between Chrome and Firefox?
Basically you change the appearance definition of the element, then you can add style to it.
.className {
-webkit-appearance: menulist-button;
height: 50px;
}
Worked for me, but it does change the border on the element. Just be sure to cross-browser check it after the change and ensure the border styling is still acceptable.
198
I hope this works for you
just give a height to the option in your stylesheet so that you can easily calculate the height of select field with the number of option rows
<style>
select>option{
height:20px;
}
</style>
and add this function in your script tag as you desire or just copy this
<script>function myFunction() {
var x = document.getElementById("mySelect").length;
var y = 20 * x +10;
document.getElementById("mySelect").style.height = y+"px";}</script>
Body section
<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>
For me this did the trick:
select {
font: inherit;
}
Since the priority is given to the inline-styling, you can use this trick to increase the height of your select list. All you have to do is add inline-style in the select tag.
<!-----------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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
