如何在html下拉列表中添加填充？

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?

Answer 1

好吧，我讨厌整个20世纪90年代的声音，但只是预先和应用结束选项文本的空间是否可以接受你想要的目标？

Answer 2

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)

Answer 3

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

Answer 4

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

Answer 5

CSS:

option{
 padding: 0.5em;
}

Answer 6

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("  "+$(this).text());  
  });  
});