背景图片在Chrome 25中无效

Question

我尝试选择样式。除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/

Answer 1

将-webkit-appearance: none;添加到.select-style课程，它适用于Chrome ..

似乎webkit对<select>元素的样式设置有点严格..

---

如果您不希望Chrome / Firefox的默认橙色边框处于焦点位置，请不要忘记添加此内容：

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

Fiddle