Styling an instant on page search

Design help Animations & Interactions
1

Hello webflow community.

I’ve used an input field to create an instant search. But i’ve ran into some issues.

  1. I used an input field in a form block to create the current styling. I gave it a class then applied the same class to my embed element. However I could not work out how to control the focused style, as it is still has the default thick blue outline. (See image below)

    Screenshot 2020-06-03 at 20.01.01
    Screenshot 2020-06-03 at 20.01.011554×426 125 KB

  2. I would also like to add a clear (x) icon to replace the search icon once the user starts to type.

3.Lastly the instant search doesn’t seem to work on mobile and i’m not sure why.

Share link: https://preview.webflow.com/preview/labaroma?utm_medium=preview_link&utm_source=designer&utm_content=labaroma&preview=f8c195a1a6f73f26e98d6c368dd4f7eb&pageId=5ec7e8bd0a860f4e0d6d92f4&mode=preview
Published link: https://labaroma.webflow.io/podcasts

If anyone could offer any tips I would grateful.

Thank you

2

You could just add a bit of custom code to style the element within the html embed or in the custom code head section of the page:

<style>
    .page-search:focus { 
          /* your styles here */
    }
</style>
3

Thanks @sam-g
That done the job! :slight_smile:

For anyone else experiencing a similar issue this is the code i used;

}
.instant-search:focus {
outline: none;
background-color: #ededed;
}

4

Did you fix instant search not working on mobile?