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

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par horusbk Sam 8 Déc 2018 - 17:34

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.

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

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 ::moitimide::

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

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 Very Happy si vous avez besoin du template n'hésitez pas à me le demander.

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


Dernière édition par horusbk le Mar 11 Déc 2018 - 1:01, édité 2 fois
horusbk

horusbk
*****

Masculin
Messages : 625
Inscrit(e) le : 14/02/2015

Voir le profil de l'utilisateur http://horus.forumactif.com/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bordures qui se tracent lors d'un clic sur un champ input

Message par Lixyr Sam 8 Déc 2018 - 20:59

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;}


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Bordures qui se tracent lors d'un clic sur un champ input 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Bordures qui se tracent lors d'un clic sur un champ input 3592387030 pour prévenir la modération.

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

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7004
Inscrit(e) le : 22/07/2010

Voir le profil de l'utilisateur https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bordures qui se tracent lors d'un clic sur un champ input

Message par horusbk Sam 8 Déc 2018 - 22:24

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 Very Happy
horusbk

horusbk
*****

Masculin
Messages : 625
Inscrit(e) le : 14/02/2015

Voir le profil de l'utilisateur http://horus.forumactif.com/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bordures qui se tracent lors d'un clic sur un champ input

Message par Lixyr Dim 9 Déc 2018 - 12:49

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.


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Bordures qui se tracent lors d'un clic sur un champ input 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Bordures qui se tracent lors d'un clic sur un champ input 3592387030 pour prévenir la modération.

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

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7004
Inscrit(e) le : 22/07/2010

Voir le profil de l'utilisateur https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bordures qui se tracent lors d'un clic sur un champ input

Message par horusbk Dim 9 Déc 2018 - 17:16

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 Smile

Merci encore
horusbk

horusbk
*****

Masculin
Messages : 625
Inscrit(e) le : 14/02/2015

Voir le profil de l'utilisateur http://horus.forumactif.com/
horusbk a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum