有什么方法可以通过CSS添加填充以选择选项吗? [英] Is there any way to add padding to select options via CSS?

问题描述

我想使用CSS在HTML的选择选项之间添加某种空间(填充，边距或其他).我目前正在使用Chrome，并且已经尝试使用以下方法:

 select option {
     padding: 10px
 }

但是它没有用.我已经读过，这是可以做到的，但是在IE中是行不通的.

无论如何，即使它无法在IE中运行，我也希望它可以在其他浏览器中工作.

JSFiddle示例

解决方案

选择选项的样式非常有限，因为要在操作系统中的所有应用程序之间保持连贯性和一致性，因此浏览器应限制样式.一些基本元素，例如您的case选项标签.

限制取决于浏览器，例如填充和选项标签的余量可以在Mozilla Firefox中使用，而不能在Chrome中使用.

如果在您的网站中非常有必要设置选项标签的样式，那么我建议您使用一些jQuery插件(您也可以自己创建下拉菜单，这很简单).

I want to add some kind of space (padding, margin or whatever) between select options in HTML using CSS. I am currently using Chrome and I've already tried using something like this:

 select option {
     padding: 10px
 }

However it didn’t work. I’ve already read that this is possible to do but it does not work in IE.

Anyway, I’d like to have this to work in other browsers even if it doesn't work in IE.

JSFiddle example

解决方案

Styling to select option is very much limited as to maintain a coherence and consistency among all the application in the operating system thus the browser are ought to restrict the style of some basic elements like in your case option tag.

The restriction depends browser to browser, like padding and even margin of option tag works in the Mozilla Firefox while it doesn't work with Chrome.

If it is very much necessary in you website to style the option tag then I suggest you to use some jQuery plugin (you can also make a drop down of your own, its simple).

这篇关于有什么方法可以通过CSS添加填充以选择选项吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！