楽天の【買い物かごに入れる】のボタンを自分の画像に変更したい

Question

楽天の【買い物かごに入れる】のボタンを自分の画像に変更したいのですが、

以下のCSSを入れると、【買い物かごに入れる】の文言が画像に被って表示されます。

画像のみにする方法を教えていただきたいです。

以下がCSSです

/買い物かごまわり全ボタン・入力欄共通/
input{
background:url(商品画像URL) no-repeat;
border:none;
width:255px;
height:55px;
}

/「個数」部分/
input#units{
border:solid #ccc 1px;
background:#fff;
width:30px;
height:20px;
line-height:20px;
text-align:center;
}

/「お問合せ」ボタン/
font input{
border:solid #ccc 1px;
background:#eeeeee;
background-image:none;
width:200px;
height:40px;
}

/「項目選択肢部分」/
.inventory input{
background:#fff;
}

Answer 1

/*買い物かごまわり全ボタン・入力欄共通*/ 
input{ 
background:url(商品画像URL) no-repeat; 
border:none; 
width:255px; 
height:55px;
text-indent:-99999px;
} 

とかどうでしょうか。

Comments

[nanasi]

ご回答誠にありがとうございます。

早速上記のCSSを入力してみたのですが、他のレイアウトがおかしくなってしまいました。

①項目別選択肢(サイズやカラーなどをチェックしてお客様に選んでいただく部分)の１マスが非常に大きくなり、ページの右にはみ出る。

②お客様に個数を選んでいただく部分に数字を打ち込んでも見えない。

[MasakazuFukami]

おそらく全てのinput要素にyu-riさんが打ち込まれたcssが適応されているのでほかがおかしくなったのではないかと思われます。

もし楽天の買い物ボタンの仕様上、クラスなどをつけることが可能でしたらクラスをつけて
（仮に<input type="text" class="buy-btn">の場合）
input.buy-btn{
background:url(商品画像URL) no-repeat;
border:none;
width:255px;
height:55px;
text-indent:-99999px;
}

でイケルと思いますよ！

[yu-ri]

ああ、そういやinput要素につけたら全部ぶっ飛びますな…これは失礼。
テキストをすっ飛ばしたい要素（type="submit"やtype="button"とかのボタン的な要素ですかね）に、MasakazuFukami様が仰るようにclassなり振ってそれに適用すればよいかと思います。

[nanasi]

MasakazuFukami様
yu-ri様

ご回答誠にありがとうございます。

素人なりに調べてみましたところ、(type="")ではなかったのですが、
input[value="買い物かごに入れる"]
というCSSを利用されているのを見かけました。

この場合

input[value="買い物かごに入れる"]
input{
background:url(商品画像URL) no-repeat;
border:none;
width:255px;
height:55px;
}

と指定すればよろしいのでしょうか。

質問ばかりで申し訳ございません。