Hello,
I assumed this issue would be easily fixed by disabling the border on the search input element while in “:focus” state. However this doesn’t seem to work. I attempted to test if the bar ever came into focus by changing other things like “placeholder” text color when the input was in focus, but that didn’t reflect on the page either. Here are 2 screenshots, one of the search bar without clicking on the input area, and one with it clicked.
Thanks in Advance!
Hi,
Welcome to the forum!
That’s the :focus-visible outline. Try adding this to the search element’s custom CSS:
%root% input[type=search]:focus-visible {
outline-color: red; /* or transparent */
}
While that css will remove the focus outline it will also break accessibility. If the website you are working on is for a public institution in the US it could open them up to lawsuits unless you handle the accessibility aspects another way.
Awesome! That worked perfectly, thank you. Could you explain what the difference between “focus” and “focus-visible” is?
Good to know, thankfully this is just a personal project to learn Bricks.
Not if you change it to red 
Focus visible shows it when it’s hit via keyboard nav or another method that means a focus state is needed for the user to know where they are on the page, focus shows it even if it’s clicked