Como posso estilizar a caixa de pesquisa personalizada do Google - javascript, html, css

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

Por favor, sem AJAX e sem 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 algo como: www.w3schools.com

Respostas:

Você pode usar a ferramenta de inspeção DOM, clique com o botão direito ema barra de pesquisa e inspecionar o elemento. E você pode determinar os IDs e classes e os estilos padrão. Em seguida, você pode criar suas próprias regras de css, que substituirão as padrão, tente o código css como este:

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