Modification de la search-box de Google difficile ?

Version imprimable

Salutations,

Sur ce site : https://wda-fr.org

Je cherche à peaufiner le CSS du moteur gsc de Google, surtout actuellement en mode responsive.
En effet, j'ai réussi à trouver les class pour tout, mais je n'arrive pas à modifier la largeur de la search-box (lorsque l'on tape du texte dans le moteur de recherche depuis un mobile).

Voici mon code actuel :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 /* Encart Google */ #google { width: 98%; /* Largeur MAX du bloc de recherche */ left: unset; right: 1px; bottom: 15px; } /* Moteur de recherche */ .gsc-control-cse { width: 98%!important; /* Largeur totale */ }
Je ne trouve pas le nom des class pour la largeur de la search-box et du bouton.
J'en ai essayé pas mal, mais l'héritage des classes doit m'empêcher de modifier cela.

Avez-vous une piste ?

Merci de votre aide ...

26/04/2020, 08h54
NoSmoking

Bonjour,

Citation:

mais je n'arrive pas à modifier la largeur de la search-box

cet élément s'adapte aux dimensions du conteneur que tu définies dans ta page.
26/04/2020, 10h17
Casio

Justement, si je trouvais la class de cette search-box, je pourrais faire un inherit.

Citation:

je pourrais faire un inherit.

un inherit de quoi ?

En regardant la structure générée, via la console du navigateur, on a :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="google">
  <!-- Code ajouté par Moteur de recherche Google !-->
  <div id="___gcse_0">
    <div class="gsc-control-searchbox-only gsc-control-searchbox-only-fr" dir="ltr">
      <form class="gsc-search-box gsc-search-box-tools" accept-charset="utf-8">
        <table cellspacing="0" cellpadding="0" class="gsc-search-box">
          <!-- -->
        </table>
      </form>
    </div>
  </div>
</div>

à toi de jouer en ayant aucune garantie que les identifiants/classes soient pérennes !

26/04/2020, 11h03
Casio

Nan, mais justement ...
J'ai déjà essayé pendant plus d'une heure toutes ces classes, avec mm le tag "!important", mais ca reste bloqué sur un héritage.
26/04/2020, 11h33
NoSmoking

Il faudrait que tu sois plus précis car je ne vois pas de soucis le composant de ta recherche fais la largeur du conteneur c'est aussi simple que cela.

Si ton élément id="google" fait 800px alors l'élément id="___gcse_0" fera 800px, c'est un élément de type block.