HTML / CSS 入力タイプ = "button" に画像アイコンを追加するにはどうすればいいですか? 質問する

HTML / CSS 入力タイプ =

以下の CSS を使用していますが、ボタンの中央に画像が配置されます。 を使用してアイコンを左揃えまたは右揃えにして<input type="button">、テキストと画像がうまく収まるようにする方法はありますか?

background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;

ベストアンサー1

どうしても を使用する必要がある場合はinput、次を試してください。

background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;

button通常、 を の中にと入れて使用する方が少し簡単ですimg

<button type="submit"><img> Text</button>

ただし、送信用の のブラウザ実装はbutton一貫性がなく、 が使用されるとすべてのボタンの値が送信されるためbutton、マルチ送信フォームで「どのボタンがクリックされたか」を検出できなくなります。

おすすめ記事