Select/Option padding

Hi,

I have a select which looks good apart from when I give it a height the text aligns to the top of the select. Is it possible to make the text align in the middle of the select drop down?

Thanks

Scott

This isn’t related to javascript at all. This should be in the CSS forum.

Why don’t you play about with it?

select {
  padding:
}
option {
  height:
  margin:
  line-height:
  padding:
}

But the OPTION element is difficult to style consistently across browsers and you’re best advised not to bother. Instead of changing the height of the SELECT, perhaps you should change the font size.

I have for about an hour now :frowning: still no luck.

When I putting padding on the select the whole thing moves down not just the options :frowning:

Like I said, SELECT and OPTION are best left alone - they’re almost impossible to style nicely because they’re controls based on the operating system’s similar controls. The padding could make it worse on OSs you aren’t testing, so I’d recommend leaving it alone.

Hi, as Raffles says those elements aren’t meant to be styled. They never were :). They are a few elements that shouldn’t be styled.

Either replicate a simliar functioning object in JS (for those who have it off, they can get a regular <select>) or just learn to deal with it :slight_smile:

I had to make “fat” dropdowns (selects) to match some artíst’s photoshop (I swear these people need to go back to print and stay there) with their own special arrow and everything.

So, actually, this could be a Javascript question: Dan Grossman claimed once that you could make the controls look whatever way you wanted to with Javascript. I’ve never seen this myself, but then that’s likely because of how I surf. : )

I did end up making the font-size, line-height and top-bottom padding larger, but I couldn’t do too much with the padding due to the arrows not expanding with the select.

You can get consistent results using something like this js plugin.

The only problem is that on heavy pages the dom ready isn’t quick enough and elements are shown and then re-drawn resulting in the page jiggling around when loading.