¿Cómo puedo personalizar el cuadro de búsqueda personalizado de Google? Javascript, html, css

Quiero tener una búsqueda en el sitio, estoy usando la búsqueda personalizada de Google, pero tiene su propio estilo. Quiero cambiar el estilo del cuadro de búsqueda usando CSS.

Por favor, no AJAX y no 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>

Quiero algo como: www.w3schools.com

Respuestas

Puede usar la herramienta de inspección DOM haciendo clic derecho enla barra de búsqueda y el elemento de inspección. Y puede determinar los ID y las clases y los estilos predeterminados. A continuación, puede crear sus propias reglas css que anularán las predeterminadas, pruebe el código css de esta manera:

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