0

背景问题

我试图设计一个选择。它在除 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/

4

1 回答 1

3

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

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

如果您不希望 Chrome/Firefox 的默认橙色边框成为焦点，也不要忘记添加这个：

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

小提琴

于 2013-02-28T23:28:52.350 回答