Preenchimento de CSS do espaço reservado HTML5

Eu já vi issopostar Já tentei de tudo para alterar o preenchimento do meu espaço reservado, mas, infelizmente, parece que ele não quer cooperar.

Enfim, aqui está o código para o css. (EDITAR: Este é o css gerado do sass)

#search {
  margin-top: 1px;
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}

#search form {
  position: relative;
}

#search input {
  padding: 0 10px 0 29px;
  color: #555555;
  border: none;
  background: url('/images/bg_searchbar.png?1296191141') no-repeat;
  width: 180px;
  height: 29px;
  overflow: hidden;
}

#search input:hover {
  color: #00ccff;
  background-position: 0px -32px;
}

E aqui está o html simples:

<div id="search">
  <form>
    <input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class="">
  </form>
  <div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;">
    <ul id="search-results" class="dropdown">
    </ul>
  </div>
</div>

Bem simples? o espaço reservado está desativado por algum motivo, mas quando você tenta digitar no campo de entrada, o texto está alinhado. Parece que você só pode mudar a cor (porwebkit) do espaço reservado, mas se eu tentar editar o preenchimento da entrada que contém, isso destruirá o design da entrada!puxa o cabelo

Aqui estão as telas do espaço reservado e do campo de entrada com entrada de texto:

EDITAR:

Por enquanto, eu recorri a issoplugin jquery.

Funciona imediatamente e corrige o problema do meu chrome. Eu ainda gostaria de descobrir qual é o problema (se tiver algo a ver com o MY chrome ou algo assim)

Tenho certeza de que não são os estilos desde que John Catterfeld o reproduziu sem problemas, então espero que alguém lá fora ainda possa me indicar a direção certa do motivo pelo qual isso está acontecendo comigo (o cromo do meu cliente também.) provavelmente é nativo do Chrome / OSX se John estiver usando o Windows)

questionAnswers(13)

yourAnswerToTheQuestion