HTML5 占位符 css 填充

我已经看过这个post了，我想尽我所能来改变我的占位符的填充，但是唉，它似乎就是不想合作.

无论如何，这里是css的代码.(EDIT:这是从sass生成的css)

#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;
}

下面是简单的html:

<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>

很简单吗？由于某些原因，占位符处于关闭状态，但当您try 在输入字段中键入时，文本会对齐.似乎您只能更改占位符的 colored颜色 (webkit)，但是如果我试图编辑包含输入的填充，它会 destruct 输入的设计！pulls out hair

以下是占位符和带有文本输入的输入字段的屏幕:

EDIT:

现在我已经求助于这个jquery plugin.

它开箱即用，解决了我的 chromium 合金问题.我仍然想找出问题出在哪里(如果它与我的 chromium 合金或其他东西有关)

我很肯定这不是John Catterfeld复制出来的风格，没有问题，所以我希望外面的人仍然能给我指出正确的方向，为什么这种情况会发生在我身上(我客户的 chromium 合金也是如此).因此，如果John使用的是Windows，那么这可能是Chrome/OSX原生的.)