Como posso estilo a caixa de pesquisa personalizada do Google

Question

Como posso estilo a caixa de pesquisa personalizada do Google

quero ter uma pesquisa no site, estou a usar a pesquisa personalizada do google, mas tem o seu próprio estilo. Eu quero mudar o estilo da caixa de pesquisa usando CSS.

Por favor, nada de AJAX e nada de jQuery.

JavaScript:

(function() {
    var cx = 'myID';
    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);
})();

HTML:

<gcse:search></gcse:search>

Eu quero tipo: www.w3schools.com

0

html css javascript

Author: Imad Farooque, 2017-07-22

Source

1 answers

score 0 · Accepted Answer

Pode usar a ferramenta de inspecção DOM, carregue com o botão direito na barra de pesquisa e inspeccione o elemento . E você pode determinar os IDs e classes e os estilos padrão . Em seguida, você pode fazer suas próprias regras css que irão substituir as predefinidas tente o código css como este:

input.gsc-input {}
input.gsc-search-button {}
form.gsc-search-box {}
div.gsc-control-cse {}