CSS, overwrite height of all select dropdowns?

Question

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

Answer 1

This should do the trick:

select { height: 60px; }

Replace 60 with your desired height.

Answer 2

Try this:

select {height:100px;}

Answer 3

You can easily do this using css use line-height and font-size.

select {
    line-height: 1em;
    font-size: 14px;
}

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

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 6

100 % work in my scenerio ..

<select onfocus='this.size=10;' onblur='this.size=1;' 
        onchange='this.size=1; this.blur();'>