css - 検索フィールド内の画像ボタン?

Question

bing.com や wolframalpha.com などの Web サイトは、テキスト フィールド内に検索ボタンをどのように作成しているのでしょうか。各ウェブサイトにアクセスすると、私の言いたいことがはっきりとわかります。

Answer 1

シンプル: 送信ボタン (背景が透明) は入力フィールドの上にあります.. :)

Answer 2

Firefox のプラグインとして Firebug を入手してください。画面上の要素をクリックして、それらの CSS を表示できます。CSS に関する多くの情報を教えてくれます。彼らは実際にマイナスのマージンを使用して、その吸盤を Bing.com に浮かび上がらせています。

http://getfirebug.com/

Answer 3

この検索ボックスの背景画像のアイデアに従って書式設定はどうですか?

http://zenverse.net/create-a-fancy-search-box-using-css/

Answer 4

@dscher -

コードは次のとおりです。Opera では問題なく動作しますが、他のブラウザでは動作しません。

提出フォーム {

background:transparent url(submit.png) no-repeat;
border:0 none;
width:16px;
height:16px;
overflow:hidden;
font-size:0px;
text-decoration:none;
cursor: pointer;
margin-top: 0px;
margin-left: -25px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 25px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;

}