How to make search box magnifiying glass clickable

This is quite tricky. You’ll need to use the forms submit button which is hidden by default.

However you cannot add the magnifying glass icon using an icon font as :before and :after styles can’t be applied to inputs.

In one of our child themes I used the submit button, but hid the content in it and overlayed the default icon.

If you’re handy with CSS you’ll probably be able to grab the code from here; https://demo.woothemes.com/proshop/

Cheers

Dear jameskoster,

Thanks for the reply, But I am new to CSS. Could you please Help me solve this.

Thanks in Advance.

Best Regards,

Rimzan Hassan

Hi Rimzan Hassan,

I second Jay that this is a bit tricky… ??

You would need to first add an invisible submit button using something like this:

.site-header .site-search input[type=submit] {
    clip: auto !important;
    right: .75em !important;
    top: 1em !important;
    display: block !important;
    text-indent: -999px !important;
    text-align: center !important;
    height: 1em !important;
    width: 1em !important;
    padding: 1em !important;
    background-color: transparent !important;
    box-shadow: none !important;
    left: auto !important;
    position: absolute;
    border: none;
}

Then you would need to style the :before element to add a kind of Magnifying glass:

.site-header .site-search .widget_product_search form::before {
    left: auto;
    right: 0.75em;
    background-color: rgb(0, 165, 191);
    top: 1em;
    color: rgb(255, 255, 255);
    line-height: 0.9;
    padding: 0.5em !important;
    border-radius: 100% !important;
}

I would just suggest changing up the colors and sizes in the CSS above in case so it matches your site’s styles better.

Cheers,

Dear @mikey,

Thanks for the code, it worked perfectly. I would like to know whether it is possible to add a hover color to the Magnifying glass icon.

Thanks in Advance.

Best Regards,

Rimzan Hassan

Closed