[CSS] buttonタグの中に画像だけを入れる場合

フォームのボタンをカスタマイズする場合にオーソドックスなのは、

  1. type="image" を使う(タイプ属性にimageを指定する)
  2. 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年現在は、ブラウザがつけているデフォルトスタイルを1行で一掃できるappearanceプロパティを使う手があります。

button {
  -webkit-appearance: none;
  appearance: none;
}

appearance:noneだけは対応が進んでいて、現在のところIE11以外のブラウザなら効果があるので、一旦appearance:noneでスタイルリセットかけてから、必要なプロパティを再設定しても同じ結果が得られます。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください