2013-02-28 4 views
0

Background problemфоновое изображение не работает в 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/

+0

Это работает для меня в Chrome 25.0.1364.99. – Intelekshual

+0

В chrome 26 под моим Linux это работает хорошо (может быть, это ошибка в хром, которую они решили в версии 26). –

+0

@Intelekshual: Здесь у меня есть «Chrome 25.0.1364.97 m», и он не работает. В нем также говорится, что у меня последнее обновление. Возможно, в зависимости от страны? – testing

ответ

3

Добавить -webkit-appearance: none; в .select-style класса, и он работает в хроме ..

Похож WebKit немного строже с стилизацией <select> элемента ..


Также не забудьте добавить этот параметр, если вы не хотите, Chrome/по умолчанию оранжевый бордюр Firefox на фокусе:

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

Fiddle

Смежные вопросы