0

enter image description here

As the above picture indicates, the selected text can be manipulated vertically using padding (in this example I use padding-top: 5px; but my client rejects the top select due to the whitespace gap between the select button (if you look above the button on example 1, you can see the space)

The client wants it to be vertically aligned, in a similar design to example two (which ditches the horrid space), I've looked far and wide but no such css property exists except for doing what is demonstrated in example 1 and that is obviously not "acceptable".

Does such a property exist? Is it cross browser compatible?

PwnageAtPwn
  • 431
  • 1
  • 6
  • 21
  • Styling inputs like this won't look the same on different browsers. If you want full control you'll want something like [Select2](http://ivaynberg.github.io/select2/) or [Uniform](http://uniformjs.com/). You can try using line-height in this case though, but that looks ugly if you have multi-line options. – Radley Sustaire Jan 17 '14 at 21:26

3 Answers3

0

<select> elements are rendered by the operating system, not HTML. They vary from OS to OS for this reason and have limited styling options.

If you want advanced styling to need to explore Javascript-based alternatives.

See: http://getbootstrap.com/components/#dropdowns

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
0

There is a trick to styling the dropdown select control, check out this article: http://bavotasan.com/2011/style-select-box-using-only-css/

Here's what you'll need to do in a nutshell:

  • Wrap the select in a container div
  • Make the select wider than the container
  • Make the select background transparent
  • Set overflow:hidden to the container
  • Add a custom background arrow image to the container.

Not sure how IE compatible this hack is, but if using JavaScript is an option, there are a slew of great options out there.

Here's one I like: http://harvesthq.github.io/chosen/

technophobia
  • 2,644
  • 1
  • 20
  • 29
0

Following Change color and appearance of drop down arrow will work very well in Chrome and Firefox although IE11 is behaving a bit oddly (possibly also other IE versions).

This will allow you to vertically align the text but since you are making the selectbox higher, you will have a small floating arrow as the expand arrow, and thus you will need to change the select element's default expand-arrow if you want it to look nice using this solution.

Community
  • 1
  • 1
Kenneth Thorman
  • 13
  • 1
  • 6