如何向html下拉列表中添加填充?

时间:2021-11-16 07:07:32

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

我想在html“选择”标签的选项中添加填充。

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

我尝试将它添加到“select”和“option”的style属性中,但它在IE中不起作用。

What can I do?

我能做什么?

6 个解决方案

#1


22  

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?

好吧,我讨厌整个20世纪90年代都是这样,但是简单地在选项文本前加上一个空格是否可以满足您的目标呢?

#2


8  

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:

跨浏览器的下拉框很难设计样式。要获得任何类型的控制,您需要在JavaScript中编写一个替换的代码。然而,需要注意:

  • Remember that the user may have difficulty using your drop down - take usabilty into account
  • 记住,用户可能有困难使用您的下拉-考虑到usabilty
  • Replace a select element with JS - this is an accessibility issue (and also allows users without JS support to use the form input)
  • 用JS替换select元素——这是一个易访问性问题(也允许不支持JS的用户使用表单输入)

#3


3  

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

FF3+和Midori(以及其他Webkit浏览器)的工作如下:

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.

我不能评论它在IE中的使用,所以如果有人能反馈或者适应的话,那就太好了。

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.

值得注意的是,select (select *)的下拉部分在FF3之外对我没有影响,无论出于什么原因,所以如果这是您想要回答的问题,我为没有提供任何新的内容而道歉。

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

演示:http://davidrhysthomas.co.uk/so/select-styling.html

#4


2  

Create a class for the SELECT

为SELECT创建一个类。

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

Now define the Css for the options of the SELECT

现在为SELECT选项定义Css

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

Tested on IE 10

测试IE 10

#5


-3  

CSS:

CSS:

option{
 padding: 0.5em;
}

#6


-3  

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

由于某种原因,我无法让它与填充或间距一起工作。我使用的jQuery解决方案是这样的:

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

#1


22  

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?

好吧,我讨厌整个20世纪90年代都是这样,但是简单地在选项文本前加上一个空格是否可以满足您的目标呢?

#2


8  

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:

跨浏览器的下拉框很难设计样式。要获得任何类型的控制,您需要在JavaScript中编写一个替换的代码。然而,需要注意:

  • Remember that the user may have difficulty using your drop down - take usabilty into account
  • 记住,用户可能有困难使用您的下拉-考虑到usabilty
  • Replace a select element with JS - this is an accessibility issue (and also allows users without JS support to use the form input)
  • 用JS替换select元素——这是一个易访问性问题(也允许不支持JS的用户使用表单输入)

#3


3  

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

FF3+和Midori(以及其他Webkit浏览器)的工作如下:

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.

我不能评论它在IE中的使用,所以如果有人能反馈或者适应的话,那就太好了。

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.

值得注意的是,select (select *)的下拉部分在FF3之外对我没有影响,无论出于什么原因,所以如果这是您想要回答的问题,我为没有提供任何新的内容而道歉。

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

演示:http://davidrhysthomas.co.uk/so/select-styling.html

#4


2  

Create a class for the SELECT

为SELECT创建一个类。

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

Now define the Css for the options of the SELECT

现在为SELECT选项定义Css

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

Tested on IE 10

测试IE 10

#5


-3  

CSS:

CSS:

option{
 padding: 0.5em;
}

#6


-3  

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

由于某种原因,我无法让它与填充或间距一起工作。我使用的jQuery解决方案是这样的:

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