optionタグに画像を表示させたいのですが、かなり時間を掛けて調べている(以前どこかのHPで見た記憶があったので・・)のですけれども、同様の質問をされている方も時々いらっしゃるのですが解決されるような回答を得られてないものばかりですので、恐縮ですが今一度質問させて下さい。
<select>
<option>画像1あいうえお</option>
<option>画像2かきくけこ</option>
</select>
のように画像1,2の部分に画像を表示させその隣りに文字を表示させるようにしたいのですが
option部分の色は変更できるのですけれども、そこへ画像を表示するにはどのようにすればよいのでしょうか。
ご教授頂けますようお願い致します。
No.1ベストアンサー
- 回答日時:
かんじんのIEでは非対応ですが:beforeで処理する手があります。
<style>
option.hoge1:before{
content: url("a.gif");
}
option.hoge2:before{
content: url("b.gif");
}
option.hoge3:before{
content: url("c.gif");
}
</style>
<select>
<option class="hoge1">あいうえお</option>
<option class="hoge2">かきくけこ</option>
<option class="hoge3">さしすせそ</option>
</select>
ご教授頂きましてありがとうございます。
styleのcontentでしたか・・・。私も style='content: url(http://www.domain/image.gif);'をつけては確認してみていたのですが、IEばかりで確認していたので分かりませんでした。まさかfirefoxで背景画像として表示されるとは・・。
くぅ~!firefoxでは可能だったとは!
何とかIEで可能にならないでしょうかねぇ・・・と、ふとした時に思い出したらぐぐってみてるんですが、中々参考になるソースが見つからなくて・・・。どっかの書き込みではブラウザーのCSSとOS自体の仕様みたいな事が書いてあったのですが、そもそも無理なんでしょうかねぇ・・でもみたんですよね。あの時なにのブラウザーだったかは記憶にないんですが、何かDLする際の国を選択する際、日本の国旗がセレクトメニューの所に表示されていて、うぉ~画像が表示されてある・・って思ったんですがブックマークしてなかったのでどこか忘れてしまって・・・。しかも3年位前だったので今は探しようがなくて彷徨ってます笑
お忙しい中、ご教授頂きましてありがとうございました。
No.4
- 回答日時:
うーん フォーム部品のようにフレームを超えてとなると難しくなりますね。
position:abusoluteでiframeの上に置くというのは出来るのですが
iframe内に置いたメニューにフレームの枠を超えさせるというのは出来ないかも。
擬似的に作るならフレーム使用しない構造にする必要があると思います。
ふむ~・・・そうですか~。でも参考になります。有難う御座いました。
他の方でご存知の方がいらっしゃるかもしれないので
もう少し様子を見てみます。
No.3
- 回答日時:
IEはOption、Selectの背景指定、before afterが未対応です
http://www.zspc.com/documents/css2/colorbg/bgima …
IE以外のブラウザでも試してみたのですが、CSSやjavascriptを使ってbackground-imageで指定できたのはFireFoxのみでした。
javascriptとCSSを駆使してselectっぽいリストメニューを作る等しか方法はないです。
3年前に見たというものも、擬似セレクトメニューだったのかもしれません。
普通にチェックボックスやラジオボタンで並べた方が早い気がします
わざわざお調べいただき有難う御座います。
擬似的なselectだったかも・・・ということですが
かなり被る文章で申し訳ないのですが、selectの印象ってiframeでページを表示していてもその内容がselectの場合ですと、iframeの枠を越えて、ブラウザーの外にまではみ出すのが魅力だと思っているのですが、擬似的なselectの場合ですと、iframe内のwidowsサイズでおさまってしまうという事でしょうか?もしくは擬似的でもiframeのwindowsサイズ内の外にはみ出る形で表示されるのでしょうか・・・ここの所がよく分かってないのですが、いかがなものかご教授願えますと幸いです。宜しくお願いします。
No.2
- 回答日時:
#1です。
きになってちょっと調べてみましたが、やはりIEでは画像をoptionに
表示する方法は見つけられませんでした。
場合によってはselectではなく、擬似的なselectをリストで書いてやるとか
そういうやり方がベターかもしれません。
ただ、そこまでしてやる必要があるかどうかは、なんともいえませんが
わざわざお調べいただき有難う御座います。
擬似的なselectですか・・・。
selectの印象ってiframe内でselectを表示していても、iframeの枠を越えて、ブラウザーの外にまではみ出すのが魅力だと思っているのですが、擬似的なselectの場合ですと、iframe内のwidowsサイズでおさまってしまうという事でしょうか?もしくは擬似的でもiframeのwindowsサイズの外にはみ出る形で表示されるのでしょうか・・・ここの所が決めてなんですけど、いかがなものかご教授願えますと幸いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript 1度きりではなく、繰り返し、挙動が変わるようにしていただきたいです。 1 2022/07/03 15:50
- その他(プログラミング・Web制作) セレクトボックスで選択された値をコントローラーで使用したい 2 2022/07/26 16:41
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
指定時間になったら、WEBサイト...
-
フォームが空欄の時にフォーム...
-
Cookieに保存されない
-
ボタンを押したあとに画像を表...
-
二次元配列の全要素の全要素を...
-
初心者です。gulpでコンパイル...
-
HTMLタグに複数のクラスを設定...
-
フロントエンドフレームワーク...
-
sessionStorageを調べています。
-
jsで診断コンテンツのページ内...
-
メールフォームの日付入力フォ...
-
disabled プロパティが表示され...
-
出発駅A、到着駅Bを選択すると...
-
特定の文字列を複数抜き出した...
-
ジャバスクリプトについて。
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
-
var exports = exports || {}; ...
-
変数名をどのようにつけるのが...
-
HTMLで作った時報アプリが動き...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLのoptionタグ部分に画像を...
-
セレクトボックスの値による入...
-
プルダウンメニュー項目のフォ...
-
セレクトボックスの幅をプルダ...
-
複数のプルダウンからリンクす...
-
プルダウンメニューでインライ...
-
<SELECT>タグでの selected 状...
-
クリックすると下に項目が出て...
-
前ページのリンクからフォーム...
-
セレクトボックスを切り替える...
-
プルダウンメニューアイテムの...
-
VB6.0でコントロール配列の配列...
-
リストボックス全選択について
-
jQuery if文の条件分岐 (。ノд...
-
プルダウンメニューで、選択項...
-
複数のプルダウンの値をパラメ...
-
プルダウンの切り替えについて
-
switch文のswitch(n)の部分を複...
-
jQuery要素の絞り込み + <selec...
-
プルダウンを2つ以上並べる時に...
おすすめ情報