Text Padding in Select Boxes

Solution 1:

Unfortunately, this extra whitespace is added by the browser's rendering engine. Form element rendering is inconsistent across browsers, and in this case is not determined by CSS.

Take a look at this article from Mozilla explaining some ways to mitigate select box incosistency, then you might read this article from Smashing Magazine about styling form elements (be sure to check out the comments and the problems people have had with selects).

Edit 2020: I stumbled across this article from Chris Coyer at CSS-Tricks that appears to show some styling that you can apply to select elements that may help some folks out. It appears overriding the browser's default styling allows you a little more freedom than I was aware of when I posted this answer several years go, according to Liliana Brissos on Team Treehouse.

Solution 2:

The padding you are seeing is coming from the browser specific stylesheet. In chrome the attribute that is responsible for styling these dropdowns is -webkit-appearance, in firefox it is -moz-appearance

You can standardize the look of your select menus by doing the following:

select {
    -webkit-appearance: none;
    -moz-appearance : none;
    border:1px solid #ccc;
    border-radius:3px;
    padding:5px 3px;
}

Note: this will not produce good looking results, only give you standard padding/spacing in your select box. To achieve good looking, customizable select boxes that you can fully control the padding/size etc there are tons of tutorials out there. Here is one I found after a quick google search:

http://www.htmllion.com/default-select-dropdown-style-just-css.html

Solution 3:

The left padding for:

• OS X Chrome and Safari = 0px;
• IE 10+ = 2px;
• Edge 17 = 3px;
• OS X FF, Android 4.4 = 4px;

These values might need more extensive cross-browser testing, I might update this later. I used a set of CSS hacks to assign different padding-left values per browser using calc with "base" value for left padding. I.e. if the base left padding is 5%, you could use the following SCSS (you can use CSS preprocessor to avoid duplication):

$select-base-gap-x: 5%;
$select-gap-x: calc(#{$select-base-gap-x} - 4px);
$select-gap-x_edge: calc(#{$select-base-gap-x} - 3px);
$select-gap-x_ie: calc(#{$select-base-gap-x} - 2px);

.select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  margin: 0;

  padding-left: $select-gap-x;
  }

/* edge 12-18 */
@supports (-ms-ime-align:auto) {
  .select {
    padding-left: $select-gap-x_edge;
    }
  }

/* ie10-11 */
_:-ms-input-placeholder, :root .select {
  padding-left: $select-gap-x_ie;
  }

/* Chrome 37+ (and Opera 24+) */
@supports (-webkit-appearance:none) and (shape-outside:none) {
  .select {
    // Webkit doesn't need any correction for padding so it uses raw base value
    padding-left: $select-base-gap-x;
    }
  }

/* Safari 6.2,7.1+ */
_::-webkit-full-page-media, _:future, :root .select {
    // Webkit doesn't need any correction for padding so it uses raw base value
    padding-left: $select-base-gap-x;
  }

/* Firefox */
@-moz-document url-prefix() {
  .select {
    // Firefox recognizes hacks for webkit, so it needs a proper padding setting again
    padding-left: $select-gap-x;
    }
  }

Here is a demo link: https://codepen.io/andreyvolokitin/pen/wvvXZBm