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.

¿Eres implementador o desarrollador WordPress?

En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:

ACCEDER AHORA