[Resolved] Replace Search Button with Magnifying Glass Image

[Lisa]

I have a website that I have added a search box in the header. I can’t post the URL because it’s a client site and I’ve agreed to keep it confidential. My client wants a “Magnifying Glass” instead of the Search Button. As a temporary visual solution, I’ve managed to add this as an image background inside the input box, which I know is wrong because it needs to be the actual search button but I can’t seem to figure out how to get it to work as the submit button instead of an actual button.

Has anyone done this or have any ideas how to do this?

[Tom]

Hi Lisa,

This topic might help: https://generatepress.com/forums/topic/search-widget-changing-its-visual-effect/#post-118586

You can neglect the first bit of CSS I think, but the rest should be relevant.

Let me know 🙂

[Lisa]

Tom, your suggestion works to put the Magnfying class outside of the input box but is there a way to put it inside the input like this
http://prnt.sc/dfk88r

[Lisa]

Played with the css and got it to work… thank you!

[Tom]

You’re welcome 🙂

[Author]

Posts