選択フィールドとオプションのスタイル設定

Question

多くのオプションを含む複数選択フィールドがあり、項目の長いリストを表示するのではなく、それらを小さな塊として表示したいと考えています。 「options」を「display: inline-block」に設定することでこれを行うことができますが、オプションがコンテナの境界に達しても2行目には入らず、コンテナの後ろに隠れてしまうという問題があります。

ここでわかるように、最後の項目が切り取られ、以降の項目はすべて非表示になります。

リーリー

オプションをコンテナの後ろに渡すのではなく、2 行目に渡す方法はありますか?

Answer 1

コンテナ スタイルに display: flex および flex-wrap:wrap; を指定すると、コンテナの幅に達したときにオプションが自動的に次の行の制限まで折り返されます。

以下は更新された CSS コードです:

リーリー

Answer 2

これを select 要素で行うのは不可能のようです。フィールド構造を「select>options」から「ul>li>checkbox」 に変更して、ボックスと各 li を希望どおりにスタイルできるようにしました。 「外観: なし」を使用してチェックボックスを非表示にすると、結果は選択したものと同じになります。