0

www.dx.com の例のような「検索ボックス」を生成するコード スニペットを教えてください。

「画像内のテキストフィールド」をグーグルで検索しても、「テキストフィールド内の画像」のすべての結果しか得られないことに驚きました。

4

2 に答える 2

4

画像内に他の要素を配置することはできませんが、次のようにしてこの効果を実現できます。

次のように使用しcssます。

<style>
    .search-container{background:url(your/image/path) no-repeat top left;width:200px;height:50px;}
    .search-container input{width:150px;}
    .search-container button{width:40px;}
</style>

そしてhtml次のように：

<html>
    <head></head>
    <body>
        <div class="search-container">
            <input type="text" /> <button>Search</button>
        </div>
    </body>
</html>

これでsearch-container、背景画像が表示され、内部に検索フォーム (入力とボタン) を配置できます。

「デフォルト」スタイルなしで入力が必要な場合は、次の方法でリセットできます。

.search-container input{border:none;background:transparent;}
于 2012-10-10T00:35:12.883 に答える
0

他の回答が指摘しているように、あなたが探していた方法は無効です。基本的に、画像の上にテキストフィールドを重ね、フィールドの境界線と背景を非表示にして、画像だけが表示されるようにします。

彼らは絶対位置を使用して画像の上部にテキストフィールドとボタンを設定し、境界線と背景を削除して要素が本質的に見えないようにし、その背後にある画像を表示しています。これは簡単な例のフィドルです。 http://jsfiddle.net/a2pQ2/2/

これがhtmlです

<div class="searchbox">
    <input type="text" class="search" id="search" value="Search in 80,000+ Gadgets...">
    <button id="btnSearch" type="button" class="btn_search"></button>
</div>​

とcss

.searchbox {
    position: relative;
    width: 367px;
    height: 36px;
    background: url(http://tctel.com/search.jpg) no-repeat;
}
.searchbox .search
{
    border: none;
    position: absolute;
    top: 6px;
    left: 6px;
    height: 24px;
    line-height: 24px;
    width: 287px;
    outline: none;
}
.searchbox .btn_search
{
    border: none;
    position: absolute;
    top: 2px;
    right: 2px;
    height: 32px;
    width: 71px;
    background: transparent;
    cursor: pointer;
}​

つまり、検索ボックスはコンテナであり、幅367ピクセル、高さ36ピクセルの背景画像があります。したがって、子を絶対に配置できるように、相対位置に設定します。

.searchはテキストフィールドです。絶対位置に設定されており、画像の境界に合わせて上下6ピクセルに設定し、同じ理由で高さを24に設定しました。そして、境界線と輪郭を隠しました。

.btn_searchはボタンで、右に配置し、境界線を非表示にし、背景を透明にし、マウスオーバーでカーソルを変更しました。

于 2012-10-10T00:43:39.117 に答える