[ACCEPTED]-How can I add padding to html dropdownlist?-css

Accepted answer
Score: 23

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

Score: 8

It is difficult to style a drop down box 3 cross browser. To get any sort of control, you'll 2 need to code a replacement one in JavaScript. Be 1 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

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

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

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

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

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

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

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

Score: 2

Create a class for the SELECT

   width: 200px; 

Now define the Css for the options of the 1 SELECT

 .listBox option{

Tested on IE 10

More Related questions