norfipc.com
Apuntes   Mapa del sitio   Últimas publicaciones

Cuadro de búsqueda con el estilo de Google

Actualizado: 17 de noviembre del 2022
Por: Norfi Carrodeguas
Código HTML y CSS para crear un cuadro de buscar en el sitio o en internet, con la apariencia del famoso buscador.
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

Facebook
Twitter

Sígueme en las redes sociales

Norfipc en Facebook Norfipc en Twitter Canales RSS con las últimas publicaciones
Inicio | Mapa del sitio | Buscar | Sobre mí

Norfi Carrodeguas, Copyright © 2023 NorfiPC