16 
<div id="inputs">
<input type="text" value="">
<input type="text" value="">
</div>
<input type="button" id="add" value="Add input">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('#add').click(function(){
 $('#inputs').append('<input type="text" value="">');
});
});
</script>

上記のコード内で、ボタンで生成されたすべての新しい入力に検索アイコンを追加したいと思います（id = add;簡単にするためにここには表示されていません）。これは典型的な入力です：

<label>
<input type="text" class="search" name="word" autofocus="autofocus" />
<span class="search-icon">
    <span class="glass"></span>
    <span class="handle"></span>
</span>
</label>

CSSを使用すると、検索アイコンを固定された方法で配置できます。

ありがとう

4

3 に答える 3

32

これが私が使用するCSSコードです：

#add {
  padding: 17px;
  padding-left: 55px;
  width: 300px;
  border: 1px solid #f5f5f5;
  font-size: 13px;
  color: gray;
  background-image: url('http://i47.tinypic.com/r02vbq.png');
  background-repeat: no-repeat;
  background-position: left center;
  outline: 0;
}

注：検索ボックスの見栄えを良くするために多くのコードを追加しました。検索ボックスを表示するために必要なコードは、padding-left、background-image：url、background-repeat、background-positionです。「 http://i47.tinypic.com/r02vbq.png」を任意の検索アイコンに置き換えます。

HTML5では、ほとんどのブラウザがレンダリングすることを知っておくことも重要です。

<input type="search" results>

検索アイコン付き。入力タイプ検索は、クリアするための「x」ボタンを備えた検索ボックスになり、「結果」を追加すると検索ボックスも表示されます。もちろん、CSSとJavaScriptを使用したxボタンを通常の検索ボックスに追加することもできます。入力タイプ検索ではスタイル設定がほとんどできないことに注意することも重要です。MacのSafariでのデモ：

デモ

これがあなたに役立つかどうか教えてください、そして答えとしてマークすることを忘れないでください。:)

于 2012-12-24T05:48:57.390 に答える
4

たとえば、を使用して画像をスパンにbackground-image配置し、相対位置を指定して左に移動し、検索ボックスの右端と重なるようにします。次に例を示します。

#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

  background-color: black;  /* Replace with your own image */
}

JSBinの実例

注：これは私の答えではありません、私はここでそれを見つけました

于 2012-12-24T05:55:23.323 に答える
3

ここにkirupa.comのステップバイステップがあります： http ：//www.kirupa.com/html5/creating_an_awesome_search_box.htm

ここにあなたに関連するCSSのビットがあります：

input[type=text] {
    width: 260px;
    padding: 5px;
    padding-right: 40px;
    outline: none;
    border: 2px solid #999999;
    border-radius: 5px;
    background-color: #FBFBFB;
    font-family: Cambria, Cochin, Georgia, serif;
    font-size: 16px;
    background-position: 270px -10px;
    background-image: url('http://www.kirupa.com/images/search.png');
    background-repeat: no-repeat;
}
于 2013-05-26T04:54:22.680 に答える