J’ai encore amélioré mon code (d’ici).

Cette fois, pour ne plus subir la bordure grise sur les champs.

On ne peut pas retirer la bordure directement (border: 0) car premièrement ça ne peut pas s’animer et deuxièmement la bordure se trouve sous l’élément, et pas dedans (ça fait un décalage).

Ici je simule une bordure grise avec un second background-image (oui, on peut en mettre autant qu’on veut), qui fait 1px de haut, positionné en bas du input.

Ceci crée un solution esthétiquement, relativement clean, sans JS, passe partout et utilisable sur tous les éléments focusables de la page.

En plus c’est facilement adaptable : pour changer la couleur de la bordure ou pour modifier l’origine de l’apparition de la bordure (centre, gauche, droite ou même n’importe quel endroit du input avec un pourcentage custo).
— (permalink)