Chrome's nifty new thick black outline :-(

[csdude55]

I'm sure you've all seen by now, Chrome's latest update includes a very thick outline on all input tags. It's terribly unattractive on my site, so I'm working to disable it.

The best idea I've found is in CSS:

*, input, select, textarea, option, button {
 outline: none!important;
}

That works, but isn't the use of * as a selector suuuuper slow?

And if I'm selecting everything, wouldn't that make input...button irrelevant? But on the flip side, is there any real reason to use the wildcard instead of specifically saying input... button?

[topr8]

chrome isn't doing that on my sites., but i have already styled input, select, textarea. option and button (if i use them)

so maybe chrome is only doing this to elements that are not styled.

i'm not sure that using * is slow, i use it on nearly all my sites (i tend to set all borders, margins, padding etc to zero at the top of my css) and it doesn't make them slow.

[NickMNS]

@csdude55
I see it, new to chrome 83. But it appears only on focus. If you go into dev tools, element inspector and force the states, hover, focus, etc... you will see that the bold outline only appears on focus.

but isn't the use of * as a selector suuuuper slow?

Most probably. But typical usage would be to select an element by ID or class and then add * to apply the style to its children, thus limiting the search. If your inputs only appear in forms for example you could use a selector like this:

form *: focus

And if I'm selecting everything, wouldn't that make input...button irrelevant?

That was my first thought, but should be easy enough to test. Just comment out /* */ everything after *.

[lucy24]

Once you’ve said * then isn’t listing anything else superfluous?

I think you’re piling on the rule too thick in any case. If outlining input is the browser's default, then all you need to do is specify a different style for "input", and the default will always be overridden. It's no different from saying, for example,
p {line-height: 1.2;}
to override the all-browser default
p {line-height: 1;}
(here I picked an example that I actually do use in my universal css).

[Fotiman]

I would note that you might be affecting accessibility features. Be sure to read up on the changes first:
[blog.chromium.org...]
[developers.google.com...]

As for styling them, the first blog post above includes links for for how to style focus for your site, including to style :focus-visible to selectively show an indicator.

[tangor]

And also bear in mind that the other aspect of the web experience is the user, who can deny all css via their browser settings ...

Sometimes KISS is the best way forward...

HOWEVER, that advice probably has nothing to do with OP's original question. Offered only in the aspect that I personally run accessibility rules in my browser simply because I can't read most of the "nifty keen look at me ma!" coding the web sometimes displays.

Make your best effort, of course, but keep in mind that it can be over-ruled.