Problema con diseño de buscador en Wordpress

Estoy volviendome loca implementando un buscador en mi web, no por la implementación en sí, sino por el diseño.

1ª opción: el widget propio de Wordpress. Queda bonito, lo completo con un plugin extra que muestra sugerencias en tiempo real... pero no hay puñetera manera de cambiarle el color al boton de BUSCAR. He aquí el codigo HTML:

<form role="search" method="get" class="search-form" action="http://www.miweb.com/">
<label>
<span class="screen-reader-text">Buscar:</span>
<input type="search" class="search-field" placeholder="Buscar …" value="" name="s" autocomplete="off">
</label>
<input type="submit" class="search-submit" value="Buscar">
</form>

He probado a hacer la modificación sobre input.search-submit, sobre .search-submit, sobre label input.search-submit, sobre input (así, en general, a lo loco) y nada, no lo modifica. Y el color que trae por defecto canta la Traviata respecto a los colores corporativos de la pagina...

2ª opción: el widget del buscador de Google
Parecía una opción fetén, pero en cuanto lo puse me encontré con otro problema de diseño: la caja de busqueda aparece por defecto con un ancho tan grande que se come el boton de busqueda. Logre mediante max-width y min-width ponerles un tamaño adecuado a cada elemento, pero el boton de busqueda incluye un icono de lupa que al hacer las modificaciones aparece pixelado, y queda cutrisimo. No puedo hacer modificaciones al respecto ni en la pagina de Google donde se crea el buscador ni en el widget en WP.
Para más inri, el codigo HTML es un horror, hecho en tablas.

<div class="wgs_wrapper">
<div id="___gcse_0">
<div class="gsc-control-searchbox-only gsc-control-searchbox-only-es" dir="ltr">
<form class="gsc-search-box gsc-search-box-tools" accept-charset="utf-8">
<table cellspacing="0" cellpadding="0" class="gsc-search-box">
<tbody>
<tr>
<td class="gsc-input">
<div class="gsc-input-box " id="gsc-iw-id1">
<table cellspacing="0" cellpadding="0" id="gs_id50" class="gstl_50 " style="width: 100%; padding: 0px;">
<tbody>
<tr>
<td id="gs_tti50" class="gsib_a">
<input autocomplete="off" type="text" size="10" class="gsc-input" name="search" title="buscar" id="gsc-i-id1" style="width: 100%; padding: 0px; border: none; margin: 0px; height: auto; outline: none; background: url(&quot;http://www.google.com/cse/static/es/google_custom_search_watermark.gif&quot;) left center no-repeat rgb(255, 255, 255);" x-webkit-speech="" x-webkit-grammar="builtin:search" lang="es" dir="ltr" spellcheck="false">
</td>
<td class="gsib_b">
<div class="gsst_b" id="gs_st50" dir="ltr">
<a class="gsst_a" href="javascript:void(0)" style="display: none;">
<span class="gscb_a" id="gs_cb50">×</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<input type="hidden" name="bgresponse" id="bgresponse">
</td>
<td class="gsc-search-button">
<input type="image" src="https://www.google.com/uds/css/v2/search_box_icon.png" class="gsc-search-button gsc-search-button-v2" title="buscar">
</td>
<td class="gsc-clear-button">
<div class="gsc-clear-button" title="borrar resultados">&nbsp;</div>
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0" class="gsc-branding">
<tbody>
<tr>
<td class="gsc-branding-user-defined">
</td>
<td class="gsc-branding-text">
<div class="gsc-branding-text">con la tecnología de</div>
</td>
<td class="gsc-branding-img">
<img src="https://www.google.com/uds/css/small-logo.png" class="gsc-branding-img">
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>

A ver si a alguien se le ocurre que se puede hacer en un caso así. También acepto recomendaciones sobre otros widgets similares que pueda emplear en lugar de estos

El resto del código me da pereza leerlo🙂

Bonita tu foto, estas muy guapa.

En el caso uno, si las clases que estas usando ( input.search-submit, .search-submit, etc. ) no te funcionan puede ser por tres motivos:

• La plantilla que estas usando imprime algunos estilos <style> de forma "inline" y estos cargan posterior a tu hoja de estilos
• La hoja de estilos de tu plantilla tiene definido un color para los botones del widget o formulario de una manera más específica, por ejemplo, añadiendo el elemento padre primero: form input[type=submit]{ colores } (cuando quieres sobreescribir tienes que usar el mismo nivel de especificación)
• Los cambios sí se están aplicando solo que tú no los ves por que estas viendo una copia guardada en la caché del navegador

sevilla666 dijo:

Insertar CODE, HTML o PHP:

#submit {
      background: #eee;
}

<input type="submit" [B]id="submit"[/B] class="search-submit" value="Buscar">

El resto del código me da pereza leerlo🙂

Bonita tu foto, estas muy guapa.

Hacer clic para expandir...

Creo que la solución que sugieres implica modificar el codigo HTML para introducir un ID en el elemento en cuestion. El caso es que no me hacia gracia alguna tener que meterme en el codigo a fozar, mas que nada por si me cargo algo. Además, ni siquiera es codigo de la plantilla del theme, sino de un widget, ni sé si podré acceder a el.

- - - Actualizado - - -

denzel dijo:

En el caso uno, si las clases que estas usando ( input.search-submit, .search-submit, etc. ) no te funcionan puede ser por tres motivos:

• La plantilla que estas usando imprime algunos estilos <style> de forma "inline" y estos cargan posterior a tu hoja de estilos
• La hoja de estilos de tu plantilla tiene definido un color para los botones del widget o formulario de una manera más específica, por ejemplo, añadiendo el elemento padre primero: form input[type=submit]{ colores } (cuando quieres sobreescribir tienes que usar el mismo nivel de especificación)
• Los cambios sí se están aplicando solo que tú no los ves por que estas viendo una copia guardada en la caché del navegador

Hacer clic para expandir...

El 3º caso creo que no es, porque acabo de ver la web en otro navegador que no uso habitualmente y pasa lo mismo. El 2º lo probé y no funcionó 😕
Desconozco lo que quieres decir con la primera opcion. ¿Tendría alguna solución posible de darse ese caso?

- - - Actualizado - - -


EUREKA! Acabo de dar con la solución!

Se me ocurrió una solución algo tediosa, pero que iba al grano y resultó ser muy efectiva: irme al codigo CSS original y efectuar una busqueda en el de todos los atributos que tenian el color hexadecimal del que me queria deshacer. Apuntaba las etiquetas referentes a botones y formularios que usaban dicho color y probaba en la hoja css alternativa, a ver si cambiaba o no. Finalmente la solución era .search-form .search-submit (sin coma de por medio). Dios, hacía tiempo que no loqueaba tanto con un cambio de CSS 😛irate: