Styliser les champs et les options de sélection
P粉924915787
P粉924915787 2023-09-08 11:28:13
0
2
475

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 ?

P粉924915787
P粉924915787

répondre à tous(2)
P粉545956597

En donnant un style au conteneur display: flexflex-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;
}
P粉226667290

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é.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal