Select multiple affiche l'icone du select simple

[T1p0un3t]

bonjour,

Lorsque l'on utilise un select multiple (multiple="multiple") l’icône utilisé pour le style du select simple apparaît au milieu à droite (sur la barre de défilement).

Exemple ici avec un début de correction : https://codepen.io/tipounet/pen/JjPxPoM J'ai corrigé de manière un peu naïve pour avoir le rendu que je souhaites. Il reste le problème de la scrollbar qui visuellement "arrête" la bordure, du coup c'est moche.

Auriez-vous une solution, plus "élégante" pour corriger ce problème ? Solution intégrable à KNACCS ?

Pour mes tests j’utilise la dernière v7 de knacss (depuis le master github).

Merci d'avance.

[raphaelgoetter]

Hello,

Je suis en train de me pencher sur ce problème.

Je n'ai pas bien compris ce que tu trouvais moche au final mais est-ce qu'il suffirait tout simplement d'appliquer le padding à droite du parent et non sur les enfants ?

En gros :

select[multiple]#modified {
  /* supprime l'icone qui style le select "simple" */
  background-image: none;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
}
select[multiple]#modified option {
  / * rien */
}

[T1p0un3t]

Salut,

pour le padding effectivement ta solution fait la même chose que ce que j'ai c'est donc plus simple. Cela résout le problème de l'affichage de l'icone.

Le coté "moche" c'est le liseré noir qui s'arrête à la barre de défilement (sans faire le tour). Il est ajouté par le box-shadow qui est imposé sur tout les champs de formulaire (https://github.com/alsacreations/KNACSS/blob/master/css/knacss-unminified.css#L2097 ). Tu retrouves le même comportement sur une textarea. (les autres champs étant "en ligne" cela ne pose pas problème).

Je pense que la bordure qui délimite totalement le select (comme ici dans le champs de saisie de commentaire, même sans le focus).

Avec mon exemple (et ta correction) j'arrive à ceci select[multiple]#modified { /* supprime l'icone qui style le select "simple" */ background-image: none; /* Correction des marges internes */ padding: 0.5rem 2.5rem 0.5rem 1rem; /* suppression du box shadow qui ne fait pas le tour du select multiple */ -webkit-box-shadow: none; box-shadow: none; /* Ajout d'une bordure pour délimiter l’élément, noire, #333 fait "pareil" pour moi */ border: 1px solid black; }

Le résultat en image sur codepen

[raphaelgoetter]

Ah je me demandais pourquoi je n'avais pas le même aperçu que toi sur Chrome, Firefox et Safari. La raison est simple : sur Mac la bordure fait bien le tour du select.

Je vois mieux à présent ;)

[raphaelgoetter]

Il fallait s'y attendre, l'histoire continue... ailleurs...

Né en 2012 et après près de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations laisse place à une toute nouvelle version, totalement remaniée : KNACSS Reborn.

Ce repo n'est plus maintenu est est dorénavant remplacé par celui de KNACSS Reborn : https://github.com/raphaelgoetter/knacss-reborn