[Support request] Need help styling search box

[Tim]

Hi,

I have added the WooCommerce Product Search Block into my Off Canvas Menu by using a Hook Element.

I have some issues with this search box on mobile view.

As soon as the search box becomes active (when touched), the border-radius changes. How can I remove that?

And, as soon as you start typing, an ugly blue border is added. I want to remove that as well.

Would anyone know how to do those two things?

Thanks in advance!

[Leo]

Hi Tim,

Can you clear and disable your caching plugin so we can take a closer look at where the style is coming from?

Thanks.

[Tim]

Done! 🙂

Also when starting to type something, the blue border changes border-radius again :/

[Leo]

Can you try the settings under Customizer > Colors > Forms and see if those work for you?

[Tim]

They don’t appear to change anything related to what I described in the first post I’m afraid :/

[Leo]

Hmm super strange. I see the issue on my phone but not when using a mobile simulator which makes it difficult.

Any chance you can disable all plugins except GP Premium and WooCommerce for me to take another look?

Thanks.

[Tim]

I may be able to do that, but not right now seeing as the site is live and we have customers coming in.

🙂

[Leo]

Can you start a staging site?

Thanks 🙂

[Tim]

Found out there are also issues on desktop. A black border is added when starting to type.

I don’t know if it helps but if I select the input in dev tools and tick this box then the black border (which I want to remove) gets added.

[Ying]

Hi Tim,

Give this CSS a try:

input#wp-block-search__input-1:focus-visible {
    outline: none !important;
}

[Tim]

Thanks, that worked (for desktop)!

However on mobile, there are still issues. Please take a look at the attached screen recording from my iPhone.

This is what happens:
1. Search box looks normal (the grey border is a bit hard to see on the recording, but it looks like it should)
2. As soon as I type the first character, the border radius changes, and the border becomes blue.
3. When the next character is typed in, the border radius goes back to normal, but the blue color persists.
4. When all characters are removed, the border-radius increases again.

I really just want the input box to stay the same no matter what (except the change to white BG color when in focus, that’s okay).

[Leo]

I feel like these issues are not caused by the theme itself.

Can you try activating a Twenty series WP theme and add the same widget to see if the issue exists there as well?

[Tim]

We have another site with a fresh WooCommerce install, just changed that theme to Twenty Twenty-One and added the same widget.

The same thing happens there, just different colors. So I guess that means it’s not an issue with GP then?

[Ying]

Yes, that’s likely defined by User agent, we can’t really do much about it Unfortuanly.

[Author]

Posts