Jump to content

PS 1.7 Modifier comportement de la barre de recherche


Recommended Posts

Posted (edited)

Bonjour,

Concernant mes travaux sur mon thème (je travaille sur une base de BLCK), je cherche un moyen de modifier le comportement du champs de recherche.

J'aimerais pouvoir afficher uniquement une icone de type "Loupe", et faire apparaitre un champs de recherche lorsqu'on clique sur cette icone.

Pour ce faire j'ai reproduit un bout de code en css sur ce thème : https://addons.prestashop.com/demo/FO19813.html

Donc voici le css que j'ai ajouté :

input.form-control.search-widget__input-right {
width: 0;
    min-width: inherit;
    padding: 10px 10px 10px 20px;
    border: none;
    background: none;
    float: right;
    transition: width .4s ease-in-out;
    -webkit-transition: width .4s ease-in-out; }

input.form-control.search-widget__input-right:focus {
width: 100%;
    border: 1px solid #cfcfcf;
    border-radius: 40px;
    font-size: 14px;
    height: 34px;
    color: #535252;
    background: #fff; }

Avec çà, j'ai bien uniquement mon icone de recherche qui est apparent, puis lors du click, la zone de texte s'affiche... Sauf que, dans mon cas, quand on clique sur l'icone de recherche, cela exécute la requête.

Sur le thème dont j'ai reproduit le code css https://addons.prestashop.com/demo/FO19813.html ; le clique sur l'icone de recherche permet juste de passer le champs en "Focus" et donc de l'afficher, mais tant qu'il n'y a pas de texte dans la zone de texte, le clique sur l'icone ne déclenche pas la requête.

J'aimerais reproduire ce comportement sur mon site, mais mes compétences s'arrêtent là.

Quelqu'un pourrait-il m'aiguiller?

 

1739668213_Sanstitre4.thumb.jpg.041a87cc33d38bdbb7a1e9fba822d4fc.jpg

 

Merci

Ps: voici mon site en cours de travaux, le bout de css n'est pas appliqué actuellement :

gounacreations.com

 

Edited by gouna
Explications pas claires (see edit history)

Share this post


Link to post
Share on other sites

  • gouna changed the title to PS 1.7 Modifier comportement de la barre de recherche

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More