[解決済み] HTML / CSS input type="button" にイメージアイコンを追加するには?
2022-08-10 05:45:01
質問
下記のCSSを使用していますが、画像がボタンの中央に配置されてしまいます。アイコンを左寄せ、右寄せにする方法はありますか?
<input type="button">
を使用してアイコンを左右に配置する方法はありますか?
background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;
どのように解決するのですか?
どうしても
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
が使用されている場合、すべてのボタンの値が送信されるという事実もあります。これは、複数送信フォームにおける "どのボタンがクリックされたか" の検出を停止させます。
関連
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] <button> vs. <input type="button" />. Which to use?
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] CSS Flexboxで、"justify-items "と "justify-self "プロパティはなぜないのですか?
-
[解決済み] フレックスアイテムを右寄せにするには?
-
[解決済み] HTMLのid属性とname属性の違い
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
document.forms 使用方法
-
[解決済み] ジャンボトロンのセンター出しは?
-
[解決済み] Sublime Text 2を使ってHTMLコードを再フォーマットするにはどうしたらいいですか?
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] CSSだけでリンクを無効化する方法
-
[解決済み] 特定のクラスや属性を持たない要素を選択するCSSセレクタは書けますか?
-
[解決済み] HTML5で(非空白の)自己閉鎖タグは有効ですか?
-
[解決済み] CSSでdivを縦にスクロールできるようにする
-
[解決済み] HTMLのdiv要素とspan要素の違いは何ですか?
-
[解決済み】url()の値の引用は本当に必要なのでしょうか?