css - 修复光标输入

Question

我有这个模板http://khine.3b1.org/search.html并且在右侧我有一个搜索输入字段。

问题是光标位于背景图像之前！

我如何将它向右移动 25px 以便它在 search_icon.png 图像之后开始。'.placeholder-field' 似乎对我没有任何帮助！

<div id="topsearch" class="yui3-u-1-8"><!-- topsearch width: 12.5% placeholder-field -->
  <table>
    <tr>
      <td>
        <a href="/;advanced_search" class="advanced-search" title="Advanced Search">Advanced Search</a>
      </td>

      <td>
        <form action=";browse_content" method="get">
          <div class="search placeholder-field">
            <input name="search_text" type="text">
            <input value="Search" class="button" type="submit">
          </div>
        </form>
      </td>
    </tr>
  </table>
</div>

这是CSS：

/**************************************************************************
 * Search 
 **************************************************************************/
#topsearch {
     display: inline-block;
     margin: 3px 0 0 0;
 }

#topsearch .advanced-search {
     display: inline-block;
     float:right;
     margin:0 3px 0 0;
     width: 16px;
     height: 16px;
     text-indent: -9999px;
     background: url('/ui/core/resources/advanced_search_icon.png') 0 0 no-repeat;
     opacity: .2;
 }

#topsearch .search input {
     font-size: 100%;
     width: 90%;
     padding: 5px 2px;
     border: 1px solid #DDD;
     border-top-color: #CCC;
     border-bottom-color: #EAEAEA;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
     background: url('/ui/core/resources/search_icon.png') 5px 50% no-repeat white;
 }

.placeholder-field {
    left: 25px;
}
#topsearch form input.button {
     display: none;
 }

我错过了什么？

有没有办法改进模板，使其更加流畅？

非常感谢

Answer 1

我已经修复了它：

#topsearch form input.button{
    cursor: pointer;
    height: 30px;
    position: absolute;
    right: 150px;
    width: 30px;
    display:block
}

您还必须删除输入的 value 属性：

<input type="submit" class="button" value="" style="position: absolute; cursor: pointer; width: 30px; right: 150px; height: 30px;">

Answer 2

只需减小输入宽度并在输入上添加 padding-left ，如下所示：

#topsearch .search input {
  padding: 5px 2px 5px 25px;
  width: 75%;
}