有没有办法通过 CSS 添加填充来选择选项? [英] Is there any way to add padding to select options via CSS?

问题描述

我想使用 CSS 在 HTML 中的选择选项之间添加某种空间(填充、边距或其他).我目前正在使用 Chrome，我已经尝试过使用这样的东西:

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
 }

但是没有用.我已经读到可以这样做，但在 IE 中不起作用.

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

无论如何，我想让它在其他浏览器中工作，即使它在 IE 中不起作用.

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

JSFiddle 示例

推荐答案

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

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.

限制取决于浏览器，例如填充甚至选项标签的边距在 Mozilla Firefox 中有效，而在 Chrome 中无效.

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.

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

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屋！