フォームのinput(送信ボタン)をCSSで画像にする方法

2011 年 3 月 12 日 - ホームページ製作に役立つhtml&cssのmemo

http://www.school-jojo.com/あまり使わないかもしれませんが、フォームのinputボタンをCSSで画像にする方法です。

CSSを使わないhtmlだけでの再現の場合は、

<form>
<input alt=”送信ボタン” src=”画像のパス.gif” type=”image” width=”画像の横サイズ” height=”画像の縦サイズ” />
</form>

ですがGETで送った場合x,y座標が出てしまうのでCSSで送信ボタンを画像にします。

htmlは

<form>
<input type=”submit” value=”” id=”input-bt” />
</form>

といたってシンプル 。更にプラスアルファのスタイルシート(CSS)

#input-bt {
border: 0px;
width: 画像の横幅;
height: 画像の縦幅;
background: url(画像へのパス) left top no-repeat;
text-indent:-9999px;
}

以上で見事に送信ボタンが画像になります。

text-indent:-9999px;は気分的に使うのが嫌な人がいるかもしれませんが気にしない、そんなことでSEOスコアは下がらない・・・と思う。

梅田でおしゃれなネイルスクール
http://www.school-jojo.com/

コメントを残す