How can I add padding to html dropdownlist?

Question

I want to add padding to the options of html "select" tag.

I try to add it in the style property of "select" and "option" and it doesn't work in IE.

What can I do?

what are you trying to do? why do you want to pad the select options? — friol, Jul 05 '09 at 08:40
I want to add some space to the left and right sides of select options to make it look better. — Billy, Jul 05 '09 at 09:35

score 23 · Accepted Answer · answered Jul 06 '09 at 15:48

23

OK, I hate to sound all 1990s, but would simply pre- and app-ending a space to the option text be acceptable for your desired goals?

answered Jul 06 '09 at 15:48

DVK

126,886
32
213
327

1

+1 vote: This is the best solution given that the OP wants to just add some space to the left and right, and if he does not want to spend a couple of hours implementing custom dropdown. – Jan Zich Jul 06 '09 at 15:52
8

Please don't do that. That prevents selecting options from a list by typing. It also breaks auto-fill. This is particular impedance to users with accessibility requirements. – Iain Collins Apr 04 '16 at 12:32
1

**Another solution which works in all browser**, is adding ` ` to first Option in select list check [this](http://stackoverflow.com/questions/25752/how-do-i-put-a-space-character-before-option-text-in-a-html-select-element) and [this](http://stackoverflow.com/questions/5828697/how-to-retain-spaces-in-dropdownlist-asp-net-mvc-razor-views), Hope helps. – Shaiju T Oct 05 '16 at 08:31

score 8 · Answer 2 · answered Jul 05 '09 at 10:05

It is difficult to style a drop down box cross browser. To get any sort of control, you'll need to code a replacement one in JavaScript. Be warned, however:

Remember that the user may have difficulty using your drop down - take usabilty into account
Replace a select element with JS - this is an accessibility issue (and also allows users without JS support to use the form input)

score 3 · Answer 3 · answered Jul 05 '09 at 14:21

The following works, in FF3+ and Midori (and presumably other Webkit browsers):

select
        {width: 14em;
        margin: 0 1em;
        text-indent: 1em;
        line-height: 2em;}

select *    {width: 14em;
        padding: 0 1em;
        text-indent: 0;
        line-height: 2em;}

The width is to allow enough room in the displayed select box when not active, the margin does what it always does, text-indent is used to feign padding between the left boundary of the select box and the inner-text. line-height is just to allow vertical spacing.

I can't comment on its use in IE, I'm afraid, so if anyone could feed back -or adapt- to suit that'd be good.

It's worth noting that the drop-down part of the select (select *) isn't affected outside of FF3 for me, for whatever reason, so if that was the question you wanted answering, I apologise for offering nothing new.

Demo at: http://davidrhysthomas.co.uk/so/select-styling.html

score 2 · Answer 4 · answered Jan 14 '14 at 20:18

2

Create a class for the SELECT

.listBox{
   width: 200px; 
   ...etc
}

Now define the Css for the options of the SELECT

 .listBox option{
     padding:4px;
    ...etc
  }

Tested on IE 10

answered Jan 14 '14 at 20:18

Exzile

389
4
15

score -3 · Answer 5 · edited Nov 21 '11 at 15:13

-3

CSS:

option{
 padding: 0.5em;
}

edited Nov 21 '11 at 15:13

Jason Plank

2,336
5
31
40

answered Jul 05 '09 at 08:22

12

The only browser in which this works is Firefox. Safari, Chrome, and Opera all take no notice of it. – Steve Harrison Jul 05 '09 at 08:33

score -3 · Answer 6 · edited Nov 30 '12 at 18:16

-3

I couldnt get this to work with padding or spacing for some reason. I went with a jQuery solution that looks like this:

$(document).click(function(){  
  $('#selector option').each(function(){  
    $(this).html("&nbsp;&nbsp;"+$(this).text());  
  });  
});

edited Nov 30 '12 at 18:16

durron597

31,968
17
99
158

answered Feb 01 '11 at 22:24

user27147

1

How can I add padding to html dropdownlist?

6 Answers6

Linked