Padding in select boxes

Question

I know select boxes are a bit of a pain to style with css, but without resorting to advanced techniques is there anyway I can add some padding to push down the text a bit without it also adding padding to the arrow on the right hand side?

Answer 1

Since select boxes appear differently on different browsers and especially operating systems, you cannot guarantee a consistency.

For example, the minimal amount of formatting I can do on a mac is this:

select { height:40px; background:transparent; }

And it looks like this:

Answer 2

Interesting test here http://cssdeck.com/labs/styling-select-box-with-css3

The author covered the arrow on the right hand side and created its own, using vendor prefixed css to target different browsers. after doing that, your padding is all free.

Answer 3

add this to your CSS class. Maybe this helps?

-webkit-appearance:none;
-moz-appearance:none;
appearance:none;

Answer 4

@Demilio's answer is great for hiding the default selectbox. With custom styling you can then change the appearance of the selectbox as you wish.

The only remaining problem is the arrows/caret which are also gone, as mentioned by @romainnm.

Unfortunately pseudo elements (e.g. :after) don't work on a select element, so the only way around it is to create an actual element after the select, something like <div class="Caret"></div>.

Add some stylying:

.Caret {
  display: block;
  position: absolute;
  cursor: pointer;
  right: 1rem;
  top: 50%;
  margin-top: -1px;
  width: 0;
  height: 0;
  border-top: 5px solid #000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

And this should result in a custom styled select box with arrows:

Unfortunately the only downside is clicking on the arrow won't open the selectbox, and that also doesn't appear to be possible to tackle with JavaScript.