私（そして、私にとっては多くの皆さん）は、サイトデザインと選択の非互換性に何度も遭遇しました。 苦痛は、スタイルを設定できず、各ブラウザで独自のスタイルに見えることです。
もちろん、フレームワーク/ライブラリ（同じブートストラップ）によって提供される膨大な数のソリューションがあります。 しかし、それらはすべてJSaの存在を示唆しています。 もちろん、これは大したことでも悪いことでもありませんが、JSが何らかの理由で壊れた場合のフォールバックとして、JSのない様式化された選択をしようとしました。
選択してください
ツール選択
このコンテキストのツールとは、selectを置き換えるものを意味します。 そして、私の選択は、同様の動作のためにラジオボタンに落ちました。一度に1つのオプションしか選択できません。
<div class="options"> <label> <input type="radio" name="r" value="111" checked> <div class="value">11text11</div> </label> ....
不要なIDとfor-ssを作成しないように、ラジオボタンを<label />でラップしました。
ロジック
選択のように目的のアイテムの選択を実装するには、リストの最上位にいる必要があります。 これを行うには、選択した要素の値を絶対的に配置し（ストリームから抜け出す）、最上部に配置する必要があることを示します。
#dropdown .options :checked + .value{ position: absolute; top: 0; }
また、ルールを遵守する必要があります。各アイテムの高さは、選択したアイテムの「空いている」場所（上からインデント）と等しくなければなりません
#dropdown .options .value{ height: var(--item-height); } #dropdown .options{ padding-top: var(--item-height); }
主な部分は機能します-アイテムを選択すると、先頭に表示されます。 「穏やかな」状態では、選択された項目のみが表示され、リストの残りの部分がクリック時に開かれ、「ミルク」をクリックすると、値を変更せずにリストが閉じられます。
擬似セレクター操作が思い浮かびます：focus 。 その下にある入力を追加します。 [type = text]を選択したのは、サイズ（幅と高さ全体に拡大）に設定でき、選択した先頭の要素を覆い隠すことができるからです。
<div class="dropdown" id="dropdown"> <input type="text"> <div class="options"> ....
ドロップダウンリストを非表示にすると、高さの制限とオーバーフローが表示されます：hidden ：
#dropdown .options{ padding-top: var(--item-height); overflow: hidden; height: 0; } #dropdown > :focus + .options{ height: var(--list-height); }
もちろん、入力は表示されるべきではありません（オプションを表すラジオボタンも同様）：
#dropdown input{ opacity: 0; }
注！不透明度を使用：0; 表示の代わりに：なし; 非表示要素（ 視覚的に：非表示を含む）がstate ：focusを持つことができないという事実のため。
ダーティハック
そして、すべてがうまくいったように思えたとき、私は驚きに出会いました。リストからメニュー項目をクリックすると、リスト項目をクリックするよりもコントロール入力からのフォーカスが速くなります。 つまり、ミルクをクリックしたときとまったく同じことが起こります-リストが閉じます。
ドロップダウンリストを非表示にする前に遅延を増やすには、ダーティハックを使用する必要があります。
#dropdown .options{ ... transition: 0s .1s height; }
完了、例を参照してください（美のためにいくつかのスタイルを追加しました）： https : //jsfiddle.net/2k1pvbyt/
複数選択
さらに先に進むと、同じ方法で（JSを使用せずに）複数選択を行います。 すべてのjquery-pluginインテグレーターがJS（JQuery）でこれを行うわけではありませんが、あなたと私は私たちの考えを決めました！ よく言った-完了、あなたは泥の中に伏せてはいけない。 これが可能かどうかを把握してみましょう。 そして、そうでない場合、特定の瞬間にjsなしではできないこと。
選択をマルチにするために、前の例で何を変更する必要がありますか？ 各項目は、他の項目に関係なく選択できる必要があります。 当然、ラジオボタンをチェックボックスに変更する必要があります。
<label data-value="111"> <input type="checkbox" required> </label>
はい、これがすべてではなく、 requiredは偶然ではありません。その助けを借りて、リストを操作します。
<fieldset> <label data-value="111"> <input type="checkbox" required> </label> </fieldset>
これを<fieldset />でラップすると、次の疑似セレクターを操作できるようになります：valid / ：invalid 。
ご注意 <fieldset/>, <form/> :valid , :valid
正確に何をすべきかを理解するには、問題を明確に述べなければなりません。
強調表示されたアイテムをリストの一番上に置きます。 それと同じ行には、他の強調表示された項目があります。
選択した項目をリストの一番上に配置するのは簡単です。display：flexを親に設定し、 order値で再生します：
#dropdown .options > fieldset:invalid{ order: 2; } #dropdown .options{ display: flex; flex-wrap: wrap; } #dropdown fieldset{ flex-basis: 100%; }
最初の条件が満たされ、選択したすべての要素を1行に配置するために、選択したアイテムに設定します。
#dropdown .options > fieldset:valid{ flex-basis: 10%; z-index: 3; }
出来上がり！ 動作するようです。
おわりに
私たちは、jsなしではどこに（タスクのフレームワーク内で）できないのかを見つけることができませんでした。
おそらく（確かに）、これはより複雑な例に当てはまります。
例への重複リンク：
さて、この「大量のマークアップ」を自分の手で書きたくない人のために、私はあなたのためにそれを行うスクリプトを入れました。
アドオンやその他の問題は大歓迎です、間違いなく！
UPD
アイデアは、制御入力を使用するようになりました。 nojsの概念から離れると、初期化にjsコンストラクターが使用されます。
行われた変更の中で：
- フォーカスがある場合、入力を非表示にするのではなく、先頭ポイントの下に移動します
- この事業では、「空席」を増やします
- 初期化するときに、この入力のハンドラーを切断します。これにより、 入力イベントのフィルタリングに必要なcssストリングが生成されます
» 例を見る
» 指示とコード