inputの投稿ボタンを画像にしたい。

Question

input要素を画像にしたくてcssを書いているのですが、全く反映されずに困っています。
どうしてダメなのでしょうか。
ちなみに、cssは「.btn {」という指定方法でもダメでした。原因を教えてください。

<input type="submit" class="btn">

input[type="submit"] {
	border: 0;
	margin: 0;
	padding: 16px 0 0 0;
	width: 16px;
	height: 0;
	background-image: url("images/normal.png");
	background-repeat:no-repeat;
	overflow: hidden;
}

Answer 1

input[type="submit"] {
  color: transparent;
  width: 150px;
  height: 50px;
  border: 0;
  background: url(http://placehold.jp/24/cc9999/993333/150x50.png);
}

のようにサイズを指定すれば背景画像が適応されると思います。

Answer 2

たぶんheight: 0;なんでしょうけど（幅や高さがないものに背景を指定しても見えないはず）
いっそ、type=imageにされては。

<input> 要素の image 型は、テキストではなく画像の形をとる送信ボタン、すなわち送信ボタンを作成するために使用されます。