ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScript を使用せずに画像をオプションとして使用するドロップダウン選択を作成する方法

JavaScript を使用せずに画像をオプションとして使用するドロップダウン選択を作成する方法

Susan Sarandon
リリース: 2024-11-08 03:53:02
オリジナル
664 人が閲覧しました

How to Create a Dropdown Select with Images as Options Without JavaScript?

オプションとして画像を使用したドロップダウン選択を作成する方法

オプションとしてテキストの代わりに画像を備えたドロップダウン選択を実装したいと考えています。 jQuery コンボボックスの使用は一般的な提案かもしれませんが、主なオプションとしてテキストを保持し、付随するアイコンとしてのみ画像を使用します。ただし、要件は、テキストを画像で完全に置き換えることです。

幸いなことに、JavaScript を使用しなくても、この解決策を実現で​​きます。方法は次のとおりです:

HTML 構造:

<div>
ログイン後にコピー

この構造では、ドロップダウン内の「オプション」としてラジオ ボタンを使用します。リンクされたラベルをクリックすると、ラジオ ボタンがアクティブになり、ドロップダウン リストの機能が作成されます。

CSS スタイル:

/* Style the overall dropdown box */
#image-dropdown {
    border: 1px solid black;
    width: 200px;
    height: 50px;
    overflow: hidden;
    transition: height 0.1s;  /* Hide when collapsed */
}
/* Style the dropdown when expanded */
#image-dropdown:hover {
    height: 200px;
    overflow-y: scroll;  /* Allow scrolling */
    transition: height 0.5s;
}
/* Hide the radio button visuals */
#image-dropdown input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
/* Style the dropdown options */
#image-dropdown label {
    display: none;
    margin: 2px;
    height: 46px;
    opacity: 0.2;
    background: url("http://www.google.com/images/srpr/logo3w.png") 50% 50%;
}
#image-dropdown:hover label {
    display: block;  /* Show all options when expanded */
}
/* Show the option related to the selected radio button */
#image-dropdown input:checked + label {
    opacity: 1 !important;
    display: block;
}
ログイン後にコピー

このスタイルは、要素の可視性とスタイルを設定し、画像をオプションとして使用してドロップダウン選択のような錯覚を作成します。

特定のニーズに合わせて、http://jsfiddle.net/NDCSR/1/ で提供される例をカスタマイズできます。たとえば、「for」属性値に基づいてラベル セレクターを使用して、各オプションの背景画像を別々に設定します。

以上がJavaScript を使用せずに画像をオプションとして使用するドロップダウン選択を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート