その投稿のコードを見ているときに、著者がその外側をクリックすると閉じられない選択を行ったことに気づきました。また、既に選択されている場合、要素の名前をクリックすると選択を開くことができないことに気付きました。
私のカスタマイズバージョンでは、前の著者と同様に、ラベル、入力[type = "radio"]、およびCSSセレクターのパワーを使用しました。 cssツールを使用した選択自体をカスタマイズすることは完全に不可能なので、選択の動作を模倣しました。
始めるために、私は次のマークアップを投げました。
HTMLコードを表示
<!-- , --> <label for="select" class="select"> <!-- . --> <input type="radio" name="list" value="not_changed" id="bg" checked /> <!-- "" --> <input type="radio" name="list" value="not_changed" id="select"> <!-- , --> <label class="bg" for="bg"></label> <!-- - , #text - , , --> <div class="items"> <!-- , --> <input type="radio" name="list" value="first_value" id="list[0]"> <!-- --> <label for="list[0]">First option</label> <!-- , [1] --> <input type="radio" name="list" value="second_value" id="list[1]"> <!-- , [1] --> <label for="list[1]">Second loooooong option</label> <!-- . , --> <span id="text">Select something...</span> </div> </label>
このコードを見ると、「すべての入力が同じ名前を持っているのはなぜですか？」という質問があるかもしれません。 すぐにお答えします。これは、selectが適切に動作するように行われます（必要に応じて開閉します）。 しかし、まず最初に。 私の意見では、最も興味深い部分、cssに移りましょう。
CSSコードを表示
/* , */ input { display: none; } /* ( .items) */ #text { position: absolute; display: block; top: 0; padding-left: 10px; } /* - , line-height( ; 4px, .. border 2px ) */ .select { display: inline-block; width: 160px; height: 34px; line-height: 30px; position: relative; } /* , , */ .select:before { content: ">"; display: inline-block; background: white; position: absolute; right: -5px; top: 2px; z-index: 2; width: 30px; height: 26px; text-align: center; line-height: 26px; border: 2px solid #ddd; transform: rotate(90deg); cursor: pointer; } /* , , */ .select input[name="list"]:not(:checked) ~ #text { color: black; background: white; } /* - , , , */ .select input[name="list"]:checked ~ #text { background: transparent; color: transparent; z-index: 2; } /* */ #select:disabled ~ .items #text { background: #eee; } /* . min-height , overflow (. ) */ .items { display: block; min-height: 30px; position: absolute; border: 2px solid #ddd; overflow: hidden; width: 160px; cursor: pointer; } /* , 30px( , ) */ #select:not(:checked) ~ .items { height: 30px; } /* ( ) */ .items label { border-top: 2px solid #ddd; display: none; padding-left: 10px; background: white; } /* - */ .items label:hover { background: #eee; cursor: pointer; } /* - */ #select:checked ~ .items { padding-top: 30px; } /* , */ #select:checked ~ .items label { display: block; } /* - , ( ) */ .items input:checked + label { display: block!important; border: none; background: white; } /* , , . background */ #select:checked ~ .bg { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 0; background: rgba(0,0,0,0.4); }
ここにあります-最も興味深い部分は、入力の選択（ラジオのタイプを持つすべての入力が同じ名前を持っている=>そのうちの1つだけを選択できる）が選択にどのように影響するかを理解する必要があることです。 このオプションのもう1つの機能は、＃selectのdisabled属性を使用して選択を無効にする機能です。
ここで完全な例を見つけることができます。
実際、それがすべてです。 前の著者のいくつかのマイナス点は修正されているため、現時点では、このソリューションは選択の理想的なCSSバージョンと考えることができます。 私のソリューションが誰かに役立つことを願っています。