0

嗨，我想在 HTML 中更改下拉菜单的样式，靠近选项标签。在 Firefox 中它可以工作，但在 IE 和 google chrome 中不能正常工作。

填充仅在 Firefox 中有效。背景颜色适用于所有浏览器，但在 IE 中您可以看到它，即使在所选值上也是如此。

使用 JSFiddle 演示

html:

<label for="locale">locale:<em>*</em></label>
<select name="locale" id="locale">
    <option selected="selected">en_CA</option>
    <option>en_US</option>
    <option>fr_FR</option>
    <option>fr_CA</option>
    <option>ja_JP</option>
</select><br />

CSS：

label{
    margin: 5px 0px 10px 0px;
    padding: 5px;
    height: 22px;
    display: inline-block;
    width: 100px;
}

label em{
    color: red;
    font-family: Arial;
    font-weight: bold;
}

select{
    color: #333;
    margin: 5px 0px 10px -5px;
    padding: 5px;
    height: 32px;
    width: 262px;
    border: #999 1px solid;
}

select option {
    padding: 5px 8px;
    background: #ddd;
}
4

2 回答 2

1

Webkit 浏览器（Safari、Chrome 等）不允许对select元素进行填充。但是，您可以通过操作顶部和底部填充的高度以及左侧填充的文本缩进来模拟填充。

更新：option元素的背景颜色也是如此。Webkit 不允许这样做，我不相信除了使用例如无序列表和一些样式来使用自己的 Javascript 实现下拉列表之外，还有其他解决方法。

于 2013-07-04T20:57:17.923 回答
1

我认为您不能只设置选项标签的样式。我想我是从某个地方读到的，它基于操作系统或其他东西......

于 2013-07-05T07:43:06.033 回答