Html 填充在选择列表中的 Safari 和 IE 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2966855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
padding is not working in Safari and IE in select list
提问by Mayur
Does any one know why my Safari is not taking padding in select lists? It's working fine in FF please tell me what to do. is there any issue with the doctype?
有谁知道为什么我的 Safari 没有在选择列表中填充？它在 FF 中运行良好，请告诉我该怎么做。文档类型有问题吗？
code:
代码：
<select style="padding-left:15px">
<option>male></option>
<option>female></option>
</select>
I'm using the following doctype;
我正在使用以下文档类型；
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
回答by mVChr
Even though the W3 spec doesn't disallow padding in select boxes, for whatever reason webkit browsers (Safari, Chrome) don't support it. Instead, you can remove the padding-leftand use text-indentinstead, adding the same amount to your select box width.
尽管 W3 规范不允许在选择框中填充，但无论出于何种原因，webkit 浏览器（Safari、Chrome）都不支持它。相反，您可以删除padding-left并使用text-indent，将相同的数量添加到您的选择框width。
From your example in your comment:
从您评论中的示例来看：
<select id="sexID" name="user[sex]"
style="border:1px solid #C1272D;
width:258px; // 243 + 15px
text-indent:15px;
height:25px;
color:#808080;">
回答by GDiz
Use a combination of text-indent and line-height to create the illusion of padding. Works in Safari and Should work in IE as well.
使用文本缩进和行高的组合来创建填充的错觉。适用于 Safari，也应适用于 IE。
<select style="text-indent:15px; line-height:28px;">
<option>male</option>
<option>female</option>
</select>
回答by Nashe
I know it is an old problem but maybe a newer solution help people working on it now.
我知道这是一个老问题，但也许更新的解决方案可以帮助人们现在解决它。
I added -webkit-appearance: initial;to my style with padding to fix the problem.
我-webkit-appearance: initial;用填充添加到我的样式中以解决问题。
-webkit-appearance: none;didn't help in my case because it shows the select as a textbox instead.
-webkit-appearance: none;在我的情况下没有帮助，因为它将选择显示为文本框。
Tested on...
测试...
Safari v5.1.7 (7534.57.2) on windows
Safari v8.0.6 (10600.6.3) on Mac
iPhone 6
Windows 上的 Safari v5.1.7 (7534.57.2)
Mac 上的 Safari v8.0.6 (10600.6.3)
iPhone 6
回答by topherg
I have just been researching the same problem. The answer I have come up with is to set the border properties to be the padding, but transparent. For example
我刚刚一直在研究同样的问题。我想出的答案是将边框属性设置为填充，但透明。例如
Original:
原来的：
select.paddedBox {
padding-left:15px;
}
Becomes:
变成：
select.paddedBox {
border-bottom:solid 0px transparent;
border-left:solid 15px transparent;
border-right:solid 0px transparent;
border-top:solid 0px transparent;
}
If you still want to use a border, then you can use the outline property to set it
如果你还想使用边框，那么你可以使用outline属性来设置它
回答by user5124221
For particular select box apply CSS as "-webkit-appearance:none;"
对于特定的选择框，将 CSS 应用为“-webkit-appearance:none;”
回答by polas
Try this this works for firefox,ie some truble with padding but works with background image. Best works in google chrome and firefox. This do not work in opera at all but padding works. So i do not care it doesn't work in opera or other browser because i hate them and it is not porssible to fix all problems to work great in all browsers.
试试这个，这适用于 Firefox，即一些带有填充但适用于背景图像的问题。在 google chrome 和 firefox 中的最佳作品。这在歌剧中根本不起作用，但填充起作用。所以我不在乎它在歌剧或其他浏览器中不起作用，因为我讨厌它们并且不可能解决所有问题以在所有浏览器中正常工作。
Just make select option 208 px image and put it like this. It has some hack elements for ie ;)
只需选择选项 208 px 图像并像这样放置即可。它有一些 hack 元素，用于 ie ;)
.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>
See in the action how it looks like ;)
在动作中看到它的样子;)
I hope you helped some ;)
我希望你帮助了一些 ;)
回答by Jiro Matchonson
For me worked
为我工作
-webkit-appearance : caret;
"none" - removed caret in chrome/firefox
"none" - 在 chrome/firefox 中删除了插入符号
"initial" - made my selectboxes jumping when hovering over them in chrome
“初始” - 使我的选择框在 chrome 中悬停在它们上方时跳跃
