Styliser les champs et les options de sélection

Question

J'ai un champ à sélection multiple avec de nombreuses options et je souhaite les afficher sous forme de petits morceaux au lieu d'afficher une longue liste d'éléments. Je peux le faire en définissant "options" sur "display: inline-block", mais j'ai un problème où les options ne vont pas dans la deuxième ligne lorsqu'elles atteignent la limite du conteneur, mais sont cachées derrière le conteneur.

Comme vous pouvez le voir ici, nous avons coupé le dernier élément et tous les éléments suivants sont invisibles.

.column-select {
    width: 100%;
}
.column-select option {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    background: #2b3035;
    color: #FFFFFF;
    margin: 5px;
    outline: none;
}

Existe-t-il un moyen de transmettre les options à la deuxième ligne au lieu de les passer derrière le conteneur ?

Answer 1

En donnant un style au conteneur display: flex 和 flex-wrap:wrap;, les options passeront automatiquement à la limite de ligne suivante lorsque la largeur du conteneur est atteinte.

Voici le code CSS mis à jour :

.column-select {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.column-select option {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  background: #2b3035;
  color: #FFFFFF;
  margin: 5px;
  outline: none;
}

Answer 2

Il semble impossible de faire cela avec l'élément select. J'ai changé la structure des champs de "select>options" à "ul>li>checkbox" afin de pouvoir styliser la boîte et chaque li li comme je le voulais. Après avoir masqué la case à cocher en utilisant "apparence : aucune", le résultat est le même que celui sélectionné.