Bootstrap 4, label flotant et input-group

Bonjour
j'ai mis en place un petit formulaire pour saisir son email et s'inscrire à une newsletter.
J'ai voulu faire une mise en forme épurée, dans Bootstrap 4, en utilisant un Label flottant et la présentation input-group.

Le but étant de présenter le label de l'input DANS l'input, et quand on commence à saisir l'email, le label "monte" dans l'input plus haut et plus petit ce qui permet de voir le label tout en saisissant l'email.

Dans mon cas, malgré avoir suivi cet exemple : https://codepen.io/appel/pen/zYrZpXQ, j'ai un problème dans je suis en focus sur l'input, car le label "Adresse Email", qui devrait donc monter tout en restant blanc, disparait. Je pense qu'il est juste transparent, mais je n'arrive pas à agir sur le bon selecteur css pour le forcer à rester blanc (et donc visible). Par contre, si je sors du focus, même en ayant saisi un email, il réapparait au dessus.

J'ai fait un code Pen pour vous montrer :
https://codepen.io/jpbond/pen/PobvRpG

Je m'arrache les cheveux sur la feuille de style, impossible de trouver pourquoi il passe transparent, uniquement dans mon curseur est dans l'input.
si vous pouviez m'aider, je suis bloqué

merci
Modifié par jp.bond (17 Mar 2021 - 19:31)

C'est la magie lol
Bon ben merci pour cette bonne idée, je ne sais pas d'où tu la sors, mais c'est top !
Pour ma culture G, j'aurais bien aimé comprendre pourquoi... mais bon, si quelqu'un sait...
En tout cas j'ai réglé mon problème et je t'en remercie !

Bonjour,

J'ai essayé au hasard un z-index:10 (car j'ai soupçonné qu'il y avait quelque chose qui cachait le label), puis j'ai modifié la valeur du z-index. Ça s'est arrêté de fonctionner à z-index:2, d'où mon z-index:3.

Amicalement,