フォームのボタンをカスタマイズする場合にオーソドックスなのは、
- type=”image” を使う
- inputやbutton要素のbackground-imageを指定する
の2つなんだけど、buttonタグの中にボタンにしたい画像をそのまま入れる手もある。
普通に入れたらこうなるけれども、
CSSをちょっと弄れば…
中の画像入れ替えるだけでokな代物に。
XHTMLのソースは至って普通。
CSSは次の通り。
button { width: auto; padding:0; margin:0; background:none; border:0; font-size:0; line-height:0; overflow:visible; cursor:pointer; }
border:0 と background:none でブラウザデフォルトのボタンは姿を消すものの、
buttonタグはIE7以下の挙動がちょっとおかしくて、横幅なんかが倍くらいになってしまう為
width: auto と overflow:visible は必須。
code
more code
~~~~