Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS, overwrite height of all select dropdowns?

Tags:

html

css

how would i reference, so i could overwrite, all of the select boxes so i can overwrite the default height? I'm familiar when i create elements using a class, but im unsure on this?

like image 302
Tom Avatar asked Aug 13 '10 11:08

Tom


People also ask

How do I change the height of a dropdown in HTML?

You just need to use the height CSS attribute for the select tag.

How do I change the selection height?

All you have to do is add inline-style in the select tag.

How do I style a selection dropdown in CSS?

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.

How do you expand a dropdown in CSS?

By setting . dropdown-menu to max-height: 0; overflow: hidden; we hide the content. We can then apply styles to the . dropdown-menu-open to increase the max-height to show the contents.


1 Answers

100% JS solution (with jquery)

$("select").height("120px");

100% JS solution (without jquery)

var selects = document.getElementsByTagName("select");
for(i = 0;i < selects.length; i++) {
    selects[i].style.height = "120px";
}

100% CSS solution

select {
    height: 100px !important;
}
like image 94
Topera Avatar answered Oct 13 '22 22:10

Topera