• HOME
  • HTML/CSS
  • inputボタン(送信ボタン)を画像にするCSS

inputボタン(送信ボタン)を画像にするCSS

管理人:sofu

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

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

 
<form>
    <input type="image" alt="Sample" width="100" height="30" src="http://www.webbibo.com/assets/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>
 
blog comments powered by Disqus

PageTop