Chrome 83 and input field borders

This is rather specific, but I just wanted to write this down in case someone else might find it useful.

In the most recent version of Chrome, v. 83, the focus style for input fields has changed, but also the style for fields out of focus. The behaviour is easily spotted if you have a field with a background colour set, even in the example of setting the background-color property to the default colour.

This is an input field (here, button, but could be any type) with no background-color

Here it is again, now with a background-color property:

Or another example with two text input fields, the top one with background-color: white the bottom one without any background-color property, but also white:

It is probably related to the new focus styles, which there are good arguments for. But as this was introduced in Google Chrome 83 and messed up the design plus I didn’t have time to go through a large application I needed a quick fix. I found this:

* {border-color: initial;}

As the new focus styles, nicely explained here, also messed up part of the styling plus the aforementioned lack of time (read: this has now become technical debt) I added another line which is bad, as it works against the new styles:

*:focus {outline: 1px solid aliceblue;} /* don't do this - unless you schedule time to fix it very soon and you are trustworthy */

I probably should have subscribed to the Chromium blog so this hadn’t been such a surprise and I had had time to prepare, but I didn’t.

 

 

 

 

 

 

 

 

This entry was posted in Development and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.