Bonsoir à tous,
en fait, j'ai une barre de recherche qui s'agrandit quand elle reçoit le focus.
Dans mon cas, j'aimerais bien que la barre de recherche se rétrécisse si elle n'a plus le focus et qu'en plus, son contenu est vide.
Existe-t-il une pseudo-class comme item:focus qui permette de réagir à cette situation-là ou faut-il d'office passer par du javascript ? Dans ce cas-ci, je ne pense pas qu'il existe un autre moyen que de passer par du javascript. Qu'en pensez-vous ?
Ne faudrait-il pas simplement mettre une image de recherche (par exemple, une loupe). Quand l'utilisateur clique sur l'image, on la cache et on fait apparaître une barre de recherche avec un effet de transition comme dans mon cas. De cette façon, on pourra tester si le champ texte est vide. Si c'est le cas, on réduit progressivement cette barre de recherche et puis, on la cache. Finalement, on fait apparaître de nouveau l'image. Si le champ texte n'est pas vide, il reste donc affiché.
Voici un bref aperçu de mon code :
https://codepen.io/anon/pen/xvdZLY
Merci d'avance et bonne soirée.
Thierry
en fait, j'ai une barre de recherche qui s'agrandit quand elle reçoit le focus.
Dans mon cas, j'aimerais bien que la barre de recherche se rétrécisse si elle n'a plus le focus et qu'en plus, son contenu est vide.
Existe-t-il une pseudo-class comme item:focus qui permette de réagir à cette situation-là ou faut-il d'office passer par du javascript ? Dans ce cas-ci, je ne pense pas qu'il existe un autre moyen que de passer par du javascript. Qu'en pensez-vous ?
Ne faudrait-il pas simplement mettre une image de recherche (par exemple, une loupe). Quand l'utilisateur clique sur l'image, on la cache et on fait apparaître une barre de recherche avec un effet de transition comme dans mon cas. De cette façon, on pourra tester si le champ texte est vide. Si c'est le cas, on réduit progressivement cette barre de recherche et puis, on la cache. Finalement, on fait apparaître de nouveau l'image. Si le champ texte n'est pas vide, il reste donc affiché.
Voici un bref aperçu de mon code :
https://codepen.io/anon/pen/xvdZLY
Merci d'avance et bonne soirée.
Thierry