html - テキストボックスにボタンがある検索ボックス

Question

一部のサイトで見られるのと同じように、その中にボタンがあるテキストボックスを作成したいのですが、通常はテキストボックスがあり、右隅にハンドレンズ画像のボタンがあり、ボタンをクリックするとフォームが送信されます。div を使用して同様のものを作成しようとしましたが、取得できないようです。cssでどのように行われますか、それともjqueryの魔法がありますか?

Answer 1

ラッパーの使用

あなたが参照しているテクニックは、実際にはテキストボックス内にボタンを持っていません。ボタンとテキストボックスの境界線と背景は、単にラッパーdivとブレンドされています。以下に基本的な例を示します。

jsフィドル

HTML

<div class="wrapper">
    <input type="text" />
    <button>GO</button>
</div>

CSS

.wrapper {
    border:1px solid #000;
    display:inline-block;
}

input,
button {
    background-color:transparent;
    border:0;
}

使用するposition:absolute

もう 1 つの方法は、ボタンを完全に配置して右側に取り付けることです。これの利点は、テキスト ボックスの周りにフォーカス/アクティブ ボーダーをより簡単に実装できることです。テキストボックスに与えることで、ボタンの問題の下のテキストを回避できpadding-rightます。

jsフィドル

.wrapper {
    border:1px solid #000;
    display:inline-block;
    position:relative;
}

input,
button {
    background-color:transparent;
    border:0;
}

button {
    position:absolute;
    right:0;
    top:0;
}

input {
    padding-right:30px; /* button padding */
}

Answer 2

これは、必ずしも最善の方法であるとは限りません。とはいえ、頼んだのはこちら。このjsFiddleをチェックしてください。ボタンの位置を作成:絶対;

http://jsfiddle.net/j8bbj/

<input type="text" />
<button>si</button>



input[type="text"]
{
    width:200px;
    height:40px;
}

button
{
    position:absolute;
    left:165px;
    top:10px;    
}