0

このテンプレートhttp://khine.3b1.org/search.htmlがあり、右側に検索入力フィールドがあります。

問題は、カーソルが背景画像の前にあることです!

search_icon.png 画像の後に開始するように、25px だけ右にシフトするにはどうすればよいですか。「.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;
 }

私は何が欠けていますか？

もう少し流動的になるようにテンプレートを改善する方法はありますか?

どうもありがとう

4

2 に答える 2

0

入力幅を減らして、次のように入力に padding-left を追加するだけです:

#topsearch .search input {
  padding: 5px 2px 5px 25px;
  width: 75%;
}
于 2011-11-25T12:12:41.123 に答える
0

私はそれを修正しました：

#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;">
于 2011-11-25T11:14:34.057 に答える