inputボタン（送信ボタン）を画像にするCSS

inputボタンに type="image" を使って送信ボタンを作成することがあると思いますが、こうするとそのボタンのx,y座標がGET値で送信されます。GET値で送りたいけど、x,y座標は表示したくない場合はスタイルシートを使ってinputボタンの背景に画像を指定します。

type="image"だとURLの後に座標の値がくっつく。

 
<form>
    <input type="image" alt="Sample" width="100" height="30" src="images/tips/image_btn.png" />
</form>
 

このボタンを押してみてください。アドレス欄のURLが座標の値がついたURLになります。

CSSで解決

 
<form>
    <input type="submit" value="" id="image-btn" />
</form>
 

 
#image-btn {
    border: 0px;
    width: 100px;
    height: 30px;
    background: url(image_btn.png) left top no-repeat;
}
 

valueの値は背景画像の上に表示されるので、空にします。空の値が気持ち悪いと感じる方はJavascriptで制御します。

Javascriptで解決

 
<form>
    <input type="image" onClick="void(this.form.submit());return false" />
</form>