Bon j'ai nettoyé un peu mon JS puis utilisé une technique bien dégueu pour ajouter des bordures à mes "li" sans que le dernier ne possède une bordure redondante avec celle de ma "div" parente. Lorsque je les sélectionne, je ne les supprime pas, je les désactive juste (display: none). Par conséquent, le dernier "li" affiché n'est pas forcément le dernier enfant de la liste, il peut très bien se trouver un autre "li" après mais désactivé. Donc on oublie le last-child en css. 
J'ai donc ajouté une ligne "hr" de hauteur nulle, décalée de la hauteur de sa bordure supérieure de couleur blanche qui vient par dessus la dernière bordure affichée.
Je pense que c'est bon de mon côté, le reste ça sera de la mise en forme simple puis intégration à mon code existant.
Remarquez-vous des problèmes ?
Avez-vous une idée pour faire plus simple ? J'ai rapidement regardé après coup ce qui existait en "select" personnalisé et je vois que c'est rarement fait en quelques lignes, donc je suppose que je ne suis pas totalement dans le faux.
code (version finale plus bas)
EDIT : ajout de commentaires pour ceux qui seraient tentés de mettre le nez dans le JS.
Message édité par MaybeEijOrNot le 03-04-2020 à 01:36:56
---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
