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、クロムで動作します..

webkit は<select>要素のスタイリングに関して少し厳しいようです..

また、Chrome/Firefox のデフォルトのオレンジ色の境界線をフォーカスしたくない場合は、これを追加することを忘れないでください:

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

フィドル

于 2013-02-28T23:28:52.350 に答える