Change icon when search bar open/active

[AndrewTaylor50Participant]

We have Ajax Search PRO displayed on several pages like the following link…
http://plattstaging1.wpengine.com/architecture/gallery/

The client is requested that when you click on the magnifying glass that this icon be replaced with an “X”

The functionality is to remain in place, meaning right now the magnifying glass functions as the open and close of the search bar on click. So the magnifying glass would be to open the search bar, and an “X” would be to close the search bar.

[AndrewTaylor50Participant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

Hi,

Well, this would require an customization, but you can try it via a custom CSS, I believe that is the simplest solution. Something like this:

.asp_m[asp-compact=open] .innericon svg {
    display: none !important;
}

.asp_m[asp-compact=open] .innericon {
    background: url('https://image.flaticon.com/icons/png/512/60/60994.png') no-repeat center center;
}

It should be very close to a possible solution.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[AndrewTaylor50Participant]

Thank you. That looks like it works.

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts