Question

有没有人知道为什么我的Safari没有选择列表中的填充？它在FF工作正常，请告诉我该怎么做。 doctype有什么问题吗？

代码：

<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">

Answer 1

即使W3规范不允许选择框中的填充，无论出于何种原因，webkit浏览器（Safari，Chrome）都不支持它。相反，您可以删除padding-left并使用text-indent，然后将相同金额添加到您的选择框width。

来自评论中的示例：

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

Answer 2

使用text-indent和line-height的组合来创建填充的错觉。在Safari中工作，也应该在IE中工作。

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

Answer 3

我知道这是一个老问题，但也许是一个较新的解决方案，可以帮助现在正在处理它的人。

我使用padding将-webkit-appearance: none;添加到我的样式中以解决问题。

{{1}}在我的案例中没有帮助，因为它将选择显示为文本框。

经过测试......

Windows上的Safari v5.1.7（7534.57.2）

Mac上的Safari v8.0.6（10600.6.3）

iPhone 6

Answer 4

我刚刚研究过同样的问题。我想出的答案是将边框属性设置为填充，但是透明。例如

原件：

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属性进行设置

Answer 5

尝试这个适用于firefox，即一些带填充的truble，但与背景图像一起使用。最好的作品在谷歌chrome和firefox。除了填充工作之外，这在歌剧中根本不起作用。所以我不在乎它在Opera或其他浏览器中不起作用，因为我讨厌它们，并且修复所有问题以便在所有浏览器中都能正常工作是不可能的。

只需选择选项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>

在动作中查看它的外观;）

我希望你帮助了一些;）

Answer 6

对于特定的选择框，将CSS应用为“-webkit-appearance：none;”

Answer 7

为我工作

-webkit-appearance : caret;

“无”-删除了chrome / firefox中的插入符号

“初始”-将我的选择框悬停在chrome中时会跳转

填充在选择列表中的Safari和IE中不起作用

7 个答案: