html - 背景图片无法在Chrome 25中使用

我试图样式选择。除了IE和Chrome，它在所有浏览器中或多或少都起作用。对我来说，最大的问题是为什么它不能在Chrome 25中使用？

在左侧，您可以看到它的外观，在右侧，您可以看到它在Chrome中的外观。

HTML：

<div class="selectContainer">
    <select name="adults" class="select-style" size="1">
        <?php
            for ($i=1; $i<=99; $i++){
                echo '<option>' . $i . '</option>';
            }
        ?>
    </select>
</div>
<div class="selectDescription">
    <span class="annotation">Erwachsene</span>
</div>

CSS：

.selectContainer {
    background-image: url('../img/select-style.png');
    background-repeat: no-repeat;
    border-bottom: 1px solid #006633;
    border-radius: 0px 0px 8px 8px;
    -moz-border-radius: 0px 0px 8px 8px;
    -webkit-border-radius: 0px 0px 8px 8px;
    width: 36px;
    overflow: hidden;
    float: left;
}

.select-style {
    width: 57px;
    height: 27px;
    border: none;
    background: none;
    padding-top: 5px;
    color: #95C11F;
}

.selectDescription {
    line-height: 27px;
    float: left;
    padding-left: 5px;
}

现场示例：
http://bfb.bplaced.net/test/

最佳答案

将-webkit-appearance: none;添加到.select-style类，它可以在chrome中使用。

似乎webkit对<select>元素的样式稍有严格要求。



另外，如果您不希望Chrome / Firefox的默认橙色边框成为焦点，请不要忘记添加以下内容：

:focus { outline-style: none; }
::-moz-focus-inner { border-style: none; }

Fiddle

关于html - 背景图片无法在Chrome 25中使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15147489/