CODEWITHSUNDEEP
csspaddinghtml-select
Brett
Brett

Reputation: 20049

Padding in select boxes

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?

Upvotes: 14

Views: 45315

Answers (6)

Muhammad Azeem
Muhammad Azeem

Reputation: 1159

select {
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    -webkit-appearance: none;
    background-position-x: 97%;
}

Upvotes: 0

14h
14h

Reputation: 1

You can use border to add padding to your select element and outline for adding the border itself

.select {
    border: 12px solid #FFF;
    outline: 1px solid #000;
}

taking that you have a white background, this will work as 12px padding but it also adds padding to the arrow

Upvotes: 0

Adam Reis
Adam Reis

Reputation: 4473

@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:

enter image description here

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.

Upvotes: 4

redolent
redolent

Reputation: 4259

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:

Select Box

Upvotes: 4

Demilio
Demilio

Reputation: 693

add this to your CSS class. Maybe this helps?

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

Upvotes: 22

commonpike
commonpike

Reputation: 11185

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.

Upvotes: 1

Related Questions