Cuadro de búsqueda con el estilo de Google

Los que deseen agregar a su blog o sitio web un cuadro de buscar, pueden usar el código que comparto y modificar sus parámetros para personalizarlo a su gusto.
El código de ejemplo permite hacer búsquedas con Google en este sitio web, pero este comportamiento de puede cambiar fácilmente.

Buscar con Google

HTML

<form class="form" action="https://www.google.com/search" method="GET" target="_blank">
<div class="input">
<input class="input2" name="q" type="search" aria-label="Buscar" placeholder="Buscar" autofocus>
<input type="hidden" name="as_sitesearch" value="norfipc.com"></div> 
<button class="boton" aria-label="Buscar" type="submit"><span class="svg"> 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg></span> 
</button> 
</form>

Mas informacion sobre el uso de formularios en HTML: Como crear cuadros o formularios de búsquedas en una página

CSS

.form{margin:0px;display:flex;border:1px solid #DFE1E5;border-radius:50px;max-width:660px;}
.input{flex:1;display:flex;padding:7px;}
.input2{background-color:transparent;border:none;margin:0;font-size: 24px;word-wrap:break-word;outline:none;display:flex;flex:1;-webkit-tap-highlight-color:transparent;width:100%;padding:6px;padding-left:14px;overflow-y:hidden;height:54px;}
.input2:focus {font-size: 24px;}
.boton{display:flex;border-radius:0 50px 50px 0;padding-left:8px;padding-right:8px;background-color:#44a0e9;border:1px solid #44a0e9;margin:-1px;outline:none;flex:0 0 auto;fill:#fff;cursor:pointer;}
.svg{background:none;height:54px;width:54px;margin:auto;}
@media screen and (min-width:300px) and (max-width:796px) {
.form{border-radius:20px;width:96%;}
.input2{font-size: 16px;padding:0;height:24px;}
.input2:focus {font-size: 16px;}
.boton{border-radius:0 20px 20px 0;}
.svg{height:24px;width:24px;}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
input:focus {font-size: 16px;}
}

Mas informacion sobre el uso de CSS: Como usar las hojas de estilo CSS en las páginas web



Comparte

Sígueme en las redes sociales