在select列表中,填充在Safari和IE中不起作用

有谁知道为什么我的Safari没有在select列表中填充? 它在FF工作正常,请告诉我该怎么做。 文档是否有问题?

码:

<select style="padding-left:15px"> <option>male></option> <option>female></option> </select> 

我正在使用以下doctype;

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

即使W3规范不允许在select框中填充填充,无论出于何种原因,webkit浏览器(Safari,Chrome)都不支持它。 相反,您可以删除padding-leftpadding-left并使用text-indent而将相同的数量添加到您的select框width

从你的评论中的例子:

 <select id="sexID" name="user[sex]" style="border:1px solid #C1272D; width:258px; // 243 + 15px text-indent:15px; height:25px; color:#808080;"> 

使用文本缩进和行高组合来创build填充幻觉。 在Safari中工作,也应该在IE中工作。

 <select style="text-indent:15px; line-height:28px;"> <option>male</option> <option>female</option> </select> 

我知道这是一个老问题,但也许现在有一个更新的解决scheme可以帮助人们开展工作。

我加了-webkit-appearance: initial; 到我的风格与填充来解决这个问题。

-webkit-appearance: none; 在我的情况下没有帮助,因为它将select显示为文本框。

testing…

在Windows上的Safari v5.1.7(7534.57.2)

在Mac上的Safari v8.0.6(10600.6.3)

iPhone 6

试试这个适用于firefox,也就是说一些带填充的truble,但是与背景图片一起工作。 最好的作品在谷歌浏览器和Firefox。 除了填充作品,这在歌剧里根本不起作用。 所以我不在乎它不能在歌剧或其他浏览器工作,因为我讨厌他们,并不能解决所有的问题,在所有的浏览器工作很好。

只要select选项208像素的图像,并把它这样。 它有一些黑客元素,即;)

 .sl{ background-color: Transparent; border: 0; background: #181818; color: #cccccc; outline: none; padding: 15px; padding-left: 5px; font-size: 8pt; line-height: 10px; width: 208px; height: 29px; -webkit-appearance: none; } <select style="background: url(select.gif) no-repeat 0 0;" name="some_countries" class="sl"> <option style="background: #000;" value="">What you need ?</option> <option style="background: #000;" value="">I think it's good</option> <option style="background: #000;" value="">what do you think ?</option> <option style="background: #000;" value="">Do you think the same lime me ? :)</option> <option style="background: #000;" value="">So what are you wating ?</option> <option style="background: #000;" value="">Grab it now and be happy ;)</option> </select> 

在动作中看看它的样子;)

我希望你能帮到一些;)

我刚才一直在研究同样的问题。 我想到的答案是设置边框属性为填充,但透明。 例如

原版的:

 select.paddedBox { padding-left:15px; } 

变为:

 select.paddedBox { border-bottom:solid 0px transparent; border-left:solid 15px transparent; border-right:solid 0px transparent; border-top:solid 0px transparent; } 

如果你仍然想使用边框,那么你可以使用outline属性来设置它

对于特定的select框,将CSS应用为“-webkit-appearance:none;”