56

I've just encountered an obscure issue with select boxes having additional space around text which doesn't seem part of the box model. Here are two pictures of what I mean:

Select Box Padding Test

Select Box Padding Test 2

Here is an example of it happening (on JSFiddle) or you can view the source to my example below:

select, input
{
	padding:0px;
	font-size:20px;
}
select.textIndent
{
	text-indent:-1.5px;
}
select.paddingOffset
{
	padding-left:2.5px;
}
input.paddingOffset
{
	padding-left:5px;
}
<h3>No Padding Test</h3>
<select>
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</select><br />
<input type="text" value="Item 1" />
<h3>Negative Text Indent</h3>
<select class="textIndent">
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</select><br />
<input type="text" value="Item 1" />
<h3>Padding Offset</h3>
<select class="paddingOffset">
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</select><br />
<input class="paddingOffset" type="text" value="Item 1" />

I have already worked out two methods of trying to work around it, by either having a negative text-indent or using left padding to adjust the input and select boxes to match up.

Both of these methods aren't perfect. There is a difference between the negative text-indent for Chrome and Firefox resulting in a noticeable space if the select and input are lined up one after the other. Trying to offset the padding can make maintaining the styling of various input and select fields somewhat difficult where you are applying a percentage of padding.

I first noticed it on a client's website where part of the word was being cut off however if that empty space was not there, the word looks like it would fit.

Client example of the issue

While I can work around this particular issue for my client (eg. wider select box, less padding), I want to know whether there is a different solution for hiding/offsetting/removing the "other" padding on the left/right of the text. Is there another CSS property I should be looking at?

I have a feeling this might just be how select boxes work but would like the collective hive of SO to prove me wrong.

Edit 1

I am hoping that the solution would be pure-CSS. I know that if I use a drop-in replacement for a select box using a JS library, it would not have the same issue.

Edit 2

Just to better clarify what I am after, the select box has an additional padding outside the box model. The pictures below show 6px for the select box and ~3px for the input. I would like to either control this particular padding or remove it entirely. I have already tried with text-indent and using a padding offset to align the text in the input and select elements but both of these seem hackish. I think there is a better CSS way of doing this.

Example Clarified 1

Example Clarified 2

7 Answers 7

33

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.

4
  • Thanks for those links. Didn't see that page on MDN before, very useful! I really want to see if there is maybe some other obscure CSS way to get around it but otherwise, I'll mark you as accepted.
    – Turnerj
    Nov 19, 2014 at 0:29
  • 1
    No problem! I've been trying to find some sort of documentation from the vendors that says specifically how certain elements are rendered, but no luck :(
    – Jerreck
    Nov 19, 2014 at 0:40
  • 1
    Another solution which works in all browser, is adding &nbsp; to first Option in select list check this and this, Hope helps.
    – Shaiju T
    Oct 5, 2016 at 8:31
  • @stom, sorry but that doesn't solve this problem at all - if anything, it actually adds to the problem. It is the select box which has additional non-content, non-border, non-padding "space", we don't want to add any more space to it, we want to remove space.
    – Turnerj
    Oct 10, 2016 at 13:11
26

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

4
  • 2
    Just tried your answer in this fiddle though I am still getting the same issue as I mentioned in my question. There is an extra padding in the select box that the input doesn't have.
    – Turnerj
    Nov 19, 2014 at 0:11
  • 2
    This doesn't remove the internal padding on the select box. Change padding to 0 to see if the text is flush against the left side.
    – 3dgoo
    Nov 19, 2014 at 0:42
  • 5
    this is not reducing the space between content and border
    – Qi Tang
    Feb 19, 2016 at 19:13
  • 2
    That removed the icon on the right side of "select" in chrome .. not a solution ! Also padding works still wrong in select in comparison to input
    – John
    Nov 3, 2016 at 19:25
7

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

1
  • I like your solution. While it is still essentially playing around with padding, I like the combination of using browser strangeness (I love that site for some CSS hacks) with SASS variables - might even be possible with CSS variables. Obviously still not as great as some way to disable this "extra padding" quirk but I like the combination of things making this specific approach more tolerable. 🙂
    – Turnerj
    Nov 10, 2019 at 4:18
-1

A good option would be to replace select box with input datalist

-6

What resolved this for me was overriding Chrome's "box-sizing" attribute on select boxes. It has "border-box" - and I overrode that and used "content-box"

1
  • Just tried it though the result is no different from my "No padding test" in Chrome 50 (so it has no effect). Can you make a JSFiddle showing your idea working?
    – Turnerj
    May 17, 2016 at 21:59
-7

To edit the select box you have to use jQuery (or javascript in general).

Anyway, you can solve the problem using this "trick":

http://jsfiddle.net/Clear/hwzd88o5/6/

Look at:

select.textIndent
{
    height: 80px;
    line-height: 80px;
    width: 300px;
    padding-left: 50px !important;
}

;)

8
  • I don't think this is something that can be fixed in JS unless you are referring to replacing a select box entirely with another element using JS. I'll update my question to clarify.
    – Turnerj
    Nov 19, 2014 at 0:04
  • Hmmm, still not what I am after. I'll update my question to clarify again. Basically, there is extra padding that is not part of the box model that select boxes have. I want to remove it rather than just offset it.
    – Turnerj
    Nov 19, 2014 at 0:13
  • Well, you right... But if you put padding: 0; to the select input and adjust the text input according to the select, they will be equal: jsfiddle.net/Clear/hwzd88o5/9 Nov 19, 2014 at 0:22
  • 1
    @DavideScanu. I think the point of the input box in the question is to show that the text is flush against the side of the box and the select box does not do that. The OP is asking if there is a way through CSS to make the select box text flush on the left side.
    – 3dgoo
    Nov 19, 2014 at 0:27
  • 2
    There is an internal padding that differs in size between different browsers. Although the internal padding is very small, in some cases it is noticeable. The OP has asked if there is a way to remove this internal padding through CSS. I don't think your answer answers this question. It's OK not to know why or not to have the answer. I too don't know why this happens or how to solve this.
    – 3dgoo
    Nov 19, 2014 at 0:41
-7

Try this. It worked for me.

 <div id="div">
       <select size=1>
          <option value="0">Option 1</option>
          <option value="1">Option 2</option>
       </select>
  </div>

CSS

 #div option {padding-left: 5px;}
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.