web-dev-qa-db-ja.com

SELECT要素の画像

CSS background-imageプロパティを使用して、HTMLドロップダウンフォーム要素のオプションの横に画像を表示する方法を知っています。

ただし、選択した要素には画像が表示されません。これを行う方法はありますか（できればCSSのみを使用して）？

編集：

以下は、リスト要素の作業コードの例です。ただし、ドロップダウンを閉じると、選択した要素のテキストのみが表示され、画像は表示されません。

<select name="form[location]">
    <option value="ad" style="background: url(img/flags/ad.gif) no-repeat; padding-left: 20px;">Andorra</option>
    <option value="ae" style="background: url(img/flags/ae.gif) no-repeat; padding-left: 20px;">United Arab Emirates</option>
    <option value="af" style="background: url(img/flags/af.gif) no-repeat; padding-left: 20px;">Afghanistan</option>
    <option value="ag" style="background: url(img/flags/ag.gif) no-repeat; padding-left: 20px;">Antigua and Barbuda</option>
    <option value="ai" style="background: url(img/flags/ai.gif) no-repeat; padding-left: 20px;">Anguilla</option>
    <option value="al" style="background: url(img/flags/al.gif) no-repeat; padding-left: 20px;">Albania</option>
    <option value="am" style="background: url(img/flags/am.gif) no-repeat; padding-left: 20px;">Armenia</option>
    <option value="an" style="background: url(img/flags/an.gif) no-repeat; padding-left: 20px;">Netherlands Antilles</option>
    <option value="ao" style="background: url(img/flags/ao.gif) no-repeat; padding-left: 20px;">Angola</option>
    <option value="ar" style="background: url(img/flags/ar.gif) no-repeat; padding-left: 20px;" selected="selected">Argentina</option>

    [...] - I think you get the idea.

</select>
htmlcsshtml-select
20
Franz

ブラウザ間でこれを行うのは非常に困難であり、不可能だと思います。

代わりに、選択ボックスのように見えて動作するウィジェットを使用してみるとよいかもしれませんが、HTMLとJavascriptで作成されています。

JQueryでこれを行う1つの方法を次に示します。

jquery.combobox

12
nicholaides

私はニコライデスに同意します。 HTMLとCSSで厳密にそれを行うのはうまくいきません。

プログレッシブ拡張手法を使用して、JavaScriptを使用していない、またはスクリーンリーダーなどを使用していないユーザー向けに、通常の選択ボックスをページに配置し、JavaScriptを使用して、選択ボックスをより洗練されたウィジェットに置き換えます。

6
Gabriel Hurley