select HTML element with height

Question

Does anyone know of a way to style an HTML select element so that it has a certain height and looks good across browsers   I ve tried simply setting height in CSS but the text inside the box is vertically off-center in Firefox    lt select style  height 1 8em   gt    This is not a duplicate question   The other question asks about the height of the drop-down box that appears when you click on a select element   My question is about the height of the unclicked select element

User · Answer

You can also  center  the text with    vertical-align  middle

User · Answer

I ve used a few CSS hacks and targeted Chrome Safari Firefox IE individually  as each browser renders selects a bit differently  I ve tested on all browsers except IE    For Safari Chrome  set the height and line-height you want for your  lt select   gt    For Firefox  we re going to kill Firefox s default padding and border  then set our own  Set padding to whatever you like   For IE 8   just like Chrome  we ve set the height and line-height properties  These two media queries can be combined  But I kept it separate for demo purposes  So you can see what I m doing   Please note  for the height line-height property to work in Chrome Safari OSX  you must set the background to a custom value  I changed the color in my example   Here s a jsFiddle of the below  http   jsfiddle net URgCB 4   For the non-hack route  why not use a custom select plug-in via jQuery  Check out this  http   codepen io wallaceerick pen ctsCz  HTML    lt select gt       lt option gt Here s one option lt  option gt       lt option gt here s another option lt  option gt   lt  select gt    CSS    media screen and  -webkit-min-device-pixel-ratio 0       safari and chrome       select           height 30px          line-height 30px          background  f4f4f4           select  -moz-focus-inner     Remove button padding in FF        border  0      padding  0     -moz-document url-prefix        targets Firefox only        select           padding  15px 0 important                   media screen 0      IE Hacks  targets IE 8  9 and 10                select           height 30px          line-height 30px

[html] <select> HTML element with height

Examples related to html

Examples related to css