HTMLのoptionタグ部分に画像を表示させたい！

質問

optionタグに画像を表示させたいのですが、かなり時間を掛けて調べている（以前どこかのHPで見た記憶があったので・・）のですけれども、同様の質問をされている方も時々いらっしゃるのですが解決されるような回答を得られてないものばかりですので、恐縮ですが今一度質問させて下さい。

<select>
<option>画像１あいうえお</option>
<option>画像２かきくけこ</option>
</select>

のように画像１，２の部分に画像を表示させその隣りに文字を表示させるようにしたいのですが
option部分の色は変更できるのですけれども、そこへ画像を表示するにはどのようにすればよいのでしょうか。

ご教授頂けますようお願い致します。

回答No.1

yambejp · ベストアンサー

かんじんのＩＥでは非対応ですが: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する際の国を選択する際、日本の国旗がセレクトメニューの所に表示されていて、うぉ～画像が表示されてある・・って思ったんですがブックマークしてなかったのでどこか忘れてしまって・・・。しかも３年位前だったので今は探しようがなくて彷徨ってます笑

お忙しい中、ご教授頂きましてありがとうございました。

回答No.4

tenderfeel

うーん　フォーム部品のようにフレームを超えてとなると難しくなりますね。
position:abusoluteでiframeの上に置くというのは出来るのですが
iframe内に置いたメニューにフレームの枠を超えさせるというのは出来ないかも。
擬似的に作るならフレーム使用しない構造にする必要があると思います。

お礼

ふむ～・・・そうですか～。でも参考になります。有難う御座いました。

他の方でご存知の方がいらっしゃるかもしれないので

もう少し様子を見てみます。

回答No.3

tenderfeel

IEはOption、Selectの背景指定、before afterが未対応です
http://www.zspc.com/documents/css2/colorbg/bgimage.html
IE以外のブラウザでも試してみたのですが、CSSやjavascriptを使ってbackground-imageで指定できたのはFireFoxのみでした。

javascriptとCSSを駆使してselectっぽいリストメニューを作る等しか方法はないです。
３年前に見たというものも、擬似セレクトメニューだったのかもしれません。
普通にチェックボックスやラジオボタンで並べた方が早い気がします

お礼

わざわざお調べいただき有難う御座います。
擬似的なselectだったかも・・・ということですが
かなり被る文章で申し訳ないのですが、selectの印象ってiframeでページを表示していてもその内容がselectの場合ですと、iframeの枠を越えて、ブラウザーの外にまではみ出すのが魅力だと思っているのですが、擬似的なselectの場合ですと、iframe内のwidowsサイズでおさまってしまうという事でしょうか？もしくは擬似的でもiframeのwindowsサイズ内の外にはみ出る形で表示されるのでしょうか・・・ここの所がよく分かってないのですが、いかがなものかご教授願えますと幸いです。宜しくお願いします。

回答No.2

yambejp

#1です。

きになってちょっと調べてみましたが、やはりＩＥでは画像をoptionに
表示する方法は見つけられませんでした。
場合によってはselectではなく、擬似的なselectをリストで書いてやるとか
そういうやり方がベターかもしれません。

ただ、そこまでしてやる必要があるかどうかは、なんともいえませんが

お礼

わざわざお調べいただき有難う御座います。

擬似的なselectですか・・・。

selectの印象ってiframe内でselectを表示していても、iframeの枠を越えて、ブラウザーの外にまではみ出すのが魅力だと思っているのですが、擬似的なselectの場合ですと、iframe内のwidowsサイズでおさまってしまうという事でしょうか？もしくは擬似的でもiframeのwindowsサイズの外にはみ出る形で表示されるのでしょうか・・・ここの所が決めてなんですけど、いかがなものかご教授願えますと幸いです。