Supprimer le rectangle blanc au-dessus de Google Searchbox

Question

Je souhaite ajouter un moteur de recherche Google à mon site Web. Ce est le code que je trouve:

<script> 
 
    (function() { 
 
    var cx = 'Search-Engine ID'; 
 
    var gcse = document.createElement('script'); 
 
    gcse.type = 'text/javascript'; 
 
    gcse.async = true; 
 
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; 
 
    var s = document.getElementsByTagName('script')[0]; 
 
    s.parentNode.insertBefore(gcse, s); 
 
    })(); 
 
</script> 
 
<div class="gcse-searchresults-only"></div> 
 
<form action="search.php" method="GET"> 
 
    <input class="input" name="q" placeholder="Search..."> 
 
</form>

Il fonctionne très bien, mais je reçois un rectangle blanc sur le dessus de la Searchbox. Au moins dans Chrome et FF. Dans Edge c'est ok. J'ai essayé beaucoup de choses à se débarrasser de ce rectangle, ajouté

.gsc-control-cse { 
border: none; 
background: none; 

}

à mon css et aussi essayé de remplacer le code de Google avec le! Code important, mais jusqu'à présent rien ne fonctionne. Comment puis-je me débarrasser de ce rectangle blanc sur ma Searchbox? Vous pouvez voir ma page de test ici: https://www.patriciakaas.nl/test.php La boîte de recherche est en bas à droite.

Johanna

Answer 1

.gsc-control-cse, .gsc-control-cse-en { 
    border:none !important; 
    background:none !important; 
}