Bordures qui se tracent lors d'un clic sur un champ input

[horusbk]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Modification template "profile_send_pass"
Lien du forum : http://horus.forumactif.com/profile?mode=sendpassword

Description du problème

Bonjour,

Je modifie actuellement le template de la page de récupération du mot de passe (profile_send_pass). Je suis en train de modifier l'apparence des deux champs "input" où l'utilisateur mettra son nom d'utilisateur et son mot de passe.

Sur certains sites j'ai vu un effet intéressant qui ajoute au champ "input" les bordures supérieure et inférieure lorsque l'utilisateur clique pour ajouter du texte. J'ai essayé d'ajouter une animation de type webkit à mon CSS mais cela appliquer l'effet sur tout l'input et non ces bordures comme j'aimerais

Je vous joins le CSS que j'ai utilisé pour personnaliser la page pour réinitialiser son mot de passe :

Spoiler:

J'ai mis le lien de la page concernée dans le formulaire si vous avez besoin du template n'hésitez pas à me le demander.

Je vous remercie par avance pour vos lumières.
Baptiste.

[Lixyr]

Bonsoir,

Un petit lien avec un input (pas forcément celui désiré) serait le bienvenue pour vous aider.

Sinon, essayez quand même :

Code:

input:hover {border: 2px solid black !important;}

ou

Code:

body input:hover {border: 2px solid black !important;}

[horusbk]

Bonsoir,

Tu coup j'ai essayé ce code mais ça ne fait que mettre les bordures lorsqu'on passe la souris dessus.
Voici le lien avec les input : http://horus.forumactif.com/profile?mode=sendpassword

J'ai déjà réussi à mettre les bordures autour de l'input mais je ne sais pas comment faire pour que ces bordures se tracent de gauche à droite lorsqu'on clique sur la zone de texte et qu'elles restent en place lorsque l'utilisateur ajoute son mail ou son nom d'utilisateur.

Merci

[Lixyr]

Dans ce cas, essayez :

Code:

input:focus {
  border: 2px solid black !important;
}

pour que ces bordures se tracent de gauche à droite lorsqu'on clique sur la zone de texte et qu'elles restent en place lorsque l'utilisateur ajoute son mail ou son nom d'utilisateur.

Pour ce qui est de tracer une bordure progressivement de gauche à droite, pour l'instant je dirais que c'est impossible, car il faut avoir accès à ces input, et les modifier pour créer quatre bordures qui ne s'afficheraient pas en même temps. Or, les input sont générés par variables.

A moins que quelqu'un ait la solution, je vous dirais de vous contenter du focus.

[horusbk]

Bonjour Lixyr =)

Merci pour le focus ! Je ne connaissais pas.

Je vais attendre un peu pour voir si quelqu'un aurait une solution à défaut je garderais la votre qui est très bien

Merci encore