[解決済み] セレクトリストに画像を追加するには?
2022-04-20 10:21:54
質問
性別の選択リストがあります。
コード
<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>
ドロップダウンリストにdrop-down-icon.jpegのような画像を使いたいのですが。
ドロップダウンのアイコンの代わりにボタンを追加したいのですが。
どうすればいいですか?
どのように解決するのですか?
で ファイアフォックス オプションに背景画像を追加するだけです。
<select>
<option style="background-image:url(male.png);">male</option>
<option style="background-image:url(female.png);">female</option>
<option style="background-image:url(others.png);">others</option>
</select>
もっといいのは、HTMLとCSSを次のように分離することです。
HTML
<select id="gender">
<option>male</option>
<option>female</option>
<option>others</option>
</select>
CSS
select#gender option[value="male"] { background-image:url(male.png); }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }
で 他のブラウザー のようなJSウィジェットライブラリを使用するしかないでしょう。 jQuery UI を使用するなど 選択可能 .
jQuery UI 1.11より。 セレクトメニュー というウィジェットが用意されており、これはあなたの希望に非常に近いものです。
関連
-
[解決済み] デフォルトで空白を選択
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] 箇条書きのない順序なしリストが必要です。
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] フレックスアイテムを右寄せにするには?
-
[解決済み] CSS 背景の不透明度 [重複]について
-
[解決済み] IMGとCSSのbackground-imageはいつ使い分ける?
-
[解決済み] Webサイトのブラウザタブアイコン(ファビコン)を追加する方法を教えてください。
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] HTML IFステートメント
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] クリック可能なラベルを持つチェックボックスを作成するには?
-
[解決済み] preタグでテキストを折り返すにはどうしたらよいですか?
-
[解決済み] メモ帳++でXML/HTMLを自動整形/インデントする方法
-
[解決済み] CSSでdivを縦にスクロールできるようにする
-
[解決済み] MIME-typeが原因でスタイルシートが読み込まれない
-
[解決済み] HTML Input="file" Accept Attribute File Type (CSV)
-
[解決済み] マークダウンにおける相互参照 (名前付きアンカー)