Need to eliminate the search input field border when clicked?

[ids]

I'm not seeing where the focus and focus-visible classes are being added to the Search Input Field after the input field is clicked. I need to stop the border from rendering. How can I prevent the border on the input field?

My attempts in "dev tools" to remove the data-attributes or other classes haven't worked. In other words, I'm not finding the trigger.

Scott

[Matt Zimmermann]

Hi Scott,

At the moment, I cannot see a way to remove the focus from the input. It does look like something is being dynamically added, but I am unable to track it down. I will continue to investigate and see if I can get this addressed for the next Shadows release when I am doing an accessibility revamp.

[ids]

BTW: The only place I've seen a "focus" class is in the extensions.css. Not sure if that helps you track it down.
Also, I couldn't seem to determine the target, but in dev tools I clicked off a block, or inline-block, for one of the classes and eliminated the border, but also other elements. Reworking the classes if I found the target would have made a mess anyway.

It looks like I need some kind of workaround regardless until this styling can be tamed.

This is a potential solution for me to remove a class from a related container. Is there a built-in function for me to be able to add "class to remove" or do I need to recreate my own? (I have a different container with a different border styling)

Scott
IDS

[Matt Zimmermann]

Hey Scott,

There are some built-in functions having to do with the search preview, you could try looking at User Interface -> Global Settings -> Search Settings -> Search Preview Settings -> JavaScript Template.

[ids]

Thanks.
Took a quick look. Appears that it will take longer to try and adapt something than to roll my own. But, I am reminded that this isn't what we want in the design of this element, to begin with.

Scott

[ids]

Matt,

Since I do not see a class definition of "focus" anywhere in the CSS or JS, is it possible that something is listening for a click and 'focus'?

Scott

[Matt Zimmermann]

Hi Scott,

That's a possibility, but that is what I am not finding. It's going to require a bit of a deep-dive.

[lesliekirk]

Hi Scott,

That's a possibility, but that is what I am not finding. It's going to require a bit of a deep-dive.

FWIW - I've tried looking too. I've even tried (like Scott has) to override the "focus" class style that gets added when you click in the search input field. My gut is it's definitely something in the javascript somewhere that adds the "focus" to the

input class="c-form-input c-control-group__field u-bg-transparent u-border-none focus"

the focus class "overrules" the u-border-none class to put that gray border (highlight?) inside or around the input field. Not sure why it's so convoluted, it's a real PIA...

[Bryan Trautloff]

ids If using Chrome, the black border that shows around the search field when clicked into is part of the 'user-agent stylesheet'. So it's not actually part of the framework css, but the browser, adding an 'outine'.

You should be able to remove it by using one the following:

Remove only from 'input' fields:

input:focus-visible {
    outline: none;
}

To remove from Search field specifically:

.t-site-header__search-form .c-form-input:focus-visible {
    outline: none;
}

cc: Matt Zimmermann

[Matt Zimmermann]

Good point Bryan Trautloff , the browsers have been adding more accessibility friendly defaults to their user-agent stylesheets.

[ids]

Thank you, Bryan. That solved it for me.

Scott