<!--"> <!--"> <!--" />

カーソル入力を修正する

私はこのテンプレートを http://khine.3b1.org/search.html としています私は検索入力フィールドを持っています。

問題はカーソルが背景画像の前に座っていることです!

search_icon.pngイメージの後に開始するように、25pxずつ右にシフトします。 '.holder-field'は私のために何もしないようです!

<div id="topsearch" class="yui3-u-1-8"><!-- topsearch width: 12.5% placeholder-field -->
  <table>
    <tr>
      <td>
        Advanced Search
      </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;
 }

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

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

どうもありがとう

0

2 答え

単に入力幅を減らし、次のように入力時に余白を追加してください:

#topsearch .search input {
  padding: 5px 2px 5px 25px;
  width: 75%;
}
0
追加された
ありがたいですが、検索ボックスにカーソルを置いてタイプすると、テキストが背景画像の上に表示されます。これを右に移動したいと思います。
追加された 著者 khinester,
どうすれば入力テキストを25ピクセルで始めることができますか?
追加された 著者 khinester,
このために多くのありがとう。
追加された 著者 khinester,
申し訳ありませんが、私はそこにタイプミスがありました。 25px、5pxではなく今すぐ働かなければならない。
追加された 著者 Leo,

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

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

また、inputのvalueプロパティを削除する必要があります:

<input type="submit" class="button" value="" style="position: absolute; cursor: pointer; width: 30px; right: 150px; height: 30px;">
0
追加された
申し訳ありませんが、これは動作しません!
追加された 著者 khinester,
@khinesterさて、私は私の答えを編集しました。もう一度やり直して、それが動作するかどうかを教えてください。
追加された 著者 Faraz Kelhini,