formのボタンのカーソルを押すの形にする方法

ここに書いてあることを見ても最初はそれがすごいこと？って思いませんでしたが、なるほどform内のサブミットボタンを矢印のカーソルのままでは今いちです。

これをイメージにすることでマウスが押すマークに変化する方法があると！

なるへそと思い、早速blogger内に作ったオリジナル検索フォームのボタンはこのままでしたらマウスは押すの形にになりません。

これを以下のように書き直してみました。

<p>ブログ内ワード検索</p>
<div id="search">
<form id="searchform" action="/search" method="get">
<input id="s" value="" name="q" type="text"/><br/>
<input alt="検索" border="0" type="image" height="20" src="http://saiki.heteml.jp/myfiles/kensaku.gif" id="searchsubmit" style="margin:3px auto auto 100px;" width="50"/>
</form>

ちょっとしたことですが、確かに操作に親しみが湧きます。
これに多くの人が悩んでいたそうです。　そ～なんだと思いました。

検索ボタンをつけた岡本博志先生のブログをよろしくお願いします！

*******************************
堀江産婦人科も検索ボタンをいじってみました。

<p>ブログ内ワード検索</p>
<form id="searchform" action="/search" method="get">
<input id="s" value="" name="q" type="text"/><br/>
<div class="goog-inline-block goog-button goog-button-base">
<div class="goog-inline-block goog-button-base-outer-box">
<div class="goog-inline-block goog-button-base-inner-box">
<div class="goog-button-base-pos"><div class="goog-button-base-top-shadow">&nbsp;</div>
<div id="sites-searchbox-search-button" style="" class="goog-button-base-content " onclick="">
<span id="sites-searchbox-search-button-label">サイトを検索</span></div></div></div></div></div>
</form>

でできました。　このCSSは
<link rel="stylesheet" type="text/css" href="http://www.gstatic.com/sites/p/1249695544760/system/app/themes/sunset/standard-css-sunset-ltr-ltr.css" /

にあります。　google siteから盗んできました。
CSSだけでできるのねと。

input[type*="button"] {
cursor: pointer;
}

最初の
<form id="searchform" action="/search" method="get">
<input id="s" value="" name="q" type="text"/><br/>
が検索マドです。
それ以外が全部ボタンをマウスオーバーさせるだけのもの…。

すごいCSSでびっくりしました。

---

お問合せフォーム

お名前 :

Email: (必須)

メッセージ: (必須)

｢今日も勉強しました｣の 「formのボタンのカーソルを押すの形にする方法」について…

約束します！迷惑かけません

　約束しないと、送信できません。再度の場合はリロードが必要です。

Tweet