不能在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/

来源

2013-02-28 testing

它为我在Chrome 25.0.1364.99。 – Intelekshual 2013-02-28 23:13:15

在我的linux下的chrome 26中，它工作得很好（也许这是他们在26版中解决的一个chrome中的错误）。 – 2013-02-28 23:15:30

@Intelekshual：在这里我有一个'Chrome 25.0.1364.97 m'，它不起作用。它还说我有最新的更新。也许取决于国家？ – testing 2013-02-28 23:20:25

添加-webkit-appearance: none;到.select-style类和它的作品中铬..

好像WebKit是一个小严与造型的<select>元素..

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

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

Fiddle

来源

2013-02-28 23:28:52 Adrift

不能在Chrome中工作的背景图像25

回答

相关问题