Mostrar botón en el widget de busqueda de genesis

Código para mostrar el botón buscar en los formularios de búsqueda de Genesis Framework


por

En muchos child theme de Genesis, el widget del buscador que aparece es tan minimalista, que no contiene ni siquiera el botón de buscar.

custom search input genesis

Por temas de usablidad, sería recomendable poder mostrar por lo menos el botón  de buscar y personalizarlo según el estilo y diseño de nuestra web.

Para ello, encontré en este artículo el estilo css necesario para poder mostrar el botón en la caja de búsqueda de los temas de Genesis:

 

.search-form {
 overflow:auto;
}
.search-form input[type="search"] {
 width: 64%;
 float: left;
 -webkit-appearance: none;
}
.search-form input[type="submit"] {
 position: relative;
 display: inline-block;
 padding: 13px;
 margin-top: 3px;
 margin-left: 10px;
 width: 90px;
 height: auto;
 clip: auto;
 text-align: center;
 background-color: #666;
 transition-property: opacity;
 transition-delay: .3s;
 transition-duration: .5s;
}
.search-form input[type="submit"]:hover {
 opacity: .7;
}

@media only screen and (max-width: 1023px) {
 .site-header .search-form {
 text-align: left;
 padding-left: 5%;
 padding-right: 5%;
 }
 .search-form input[type="search"] {
 width: 70%;
 }
}
@media only screen and (max-width: 320px) {
 .search-form input[type="search"] {
 width: 55%;
 }
}

Incluye además los estilos necesarios para el responsive design en pantallas pequeñas de móvil.

Desarrollo Web by esther solà
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.