I have a wordpress site running woocommerce but I have a small problem with my product search box; for purposes of solving the issue I've placed on top of this product search box the global website search form, which has proper styling. The problem with the product search is I can't get the borders and button (magnifying glass) to look exactly the same as the global search form, because the borders are declared as 0 in the styling. I've attached a screenshot of what the code looks like, both in CSS and in HTML in firebug for both search forms. For some reason, the product search doesn't inherit my theme's styling as the global search.
I've tried to override the 0px border in my custom stylesheet, but I can't get it to work..I also don't understand the HTML code for the global search form (the properly styled one), but I'm assuming that's what's giving it it's style as opposed to css, because it changes according to it's placement. (I'm referring to this bit:)
<input type="text" onblur="if (this.value == '')this.value = 'Introduzca la palabra clave';" onfocus="if (this.value == 'Introduzca la palabra clave')this.value = '';" value="Introduzca la palabra clave" id="s" name="s">
Here is a link to my page: https://wolfrikdesign.com
If anyone could help out in making these two search forms look the same I'd be incredibly grateful!!
Thanks in advance,
Hi petitedecadence, The
The border is actuly on a div containing the input with a class of searcharea.
So just wrap the field in a div with class="searcharea" and all should fall into place.
Worked like a charm
Thanks so much, that worked perfectly! I also added the searchbutton class to the submit button and now it looks exactly the same