CSS, overwrite height of all select dropdowns?

Question

Hi, 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?

Answer 1

You mean the menu that pops up when dropping down a native select element?

I don't think you can influence that at all, that's entirely up to the browser.

What you might be able to influence - it should work in all current browsers - is the select itself:

select { height: .... }

or each option (Should work in Firefox; spotty support otherwise)

select option { height: .... }

Answer 2

This should do the trick:

select { height: 60px; }

Replace 60 with your desired height.

Answer 3

select {height:100px;}

Answer 4

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;
}

Answer 5

The best way is to give a class on your select element. <select name="nameforyourselect" class="myclass"></select>

Then on your css set the height, for example .myclass{height:30px;} this will give height 30px on all elements with class name myclass. I suggest you this way, because you may wish to create another select element with another height. So you just set other class on it and define it on your css.