フォームのボタンをカスタマイズする場合にオーソドックスなのは、
type="image"を使う（タイプ属性にimageを指定する）- inputやbutton要素に
background-imageを指定する
の2つなんだけど、buttonタグの中にボタンにしたい画像をそのまま入れる手もある。
普通に入れたらこうなるけれども、
CSSをちょっと弄れば…
中の画像入れ替えるだけでokな代物に。
HTMLのソースは至って普通。
<button type="reset">
<img src="button.png" alt="button" width="160" height="30" /></button>
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 は必須。
appearanceプロパティの利用
記事の初稿から10年経った2019年現在は、ブラウザがつけているデフォルトスタイルを１行で一掃できるappearanceプロパティを使う手があります。
button {
-webkit-appearance: none;
appearance: none;
}
appearance:noneだけは対応が進んでいて、現在のところIE11以外のブラウザなら効果があるので、一旦appearance:noneでスタイルリセットかけてから、必要なプロパティを再設定しても同じ結果が得られます。
WAI-ARIAの利用
記事の初稿から12年経った2021年現在、アクセシビリティを考慮したマークアップをするなら次のようになります。
<button type="reset" aria-label="サンプルのボタン">
<img src="button.png" alt="" width="160" height="30" role="presentation" />
</button>
aria-labelはVoiceOverなどを利用した時に読み上げられるテキストであり、SEO的にはあまり意味がありませんが、中身が画像だけのボタンの場合は画像のalt属性にテキストを設定するよりも、ボタン要素にラベルをつける方が読み上げられたときに自然なのでこのようにマークアップするのがいいかなと思っています。