Browser update to form controls and focus indicators

[Eric Shulman]

Hi All,

This morning, when I loaded my current TW project which has many input forms, there was a very noticeable change in the default appearance of most form inputs.

After a brief investigation, it turns out that Chrome, Edge, and other popular Chromium-based browsers have gotten a major facelift over the past few months, and Chrome just rolled these changes in the latest update (v83)

This doesn't affect non-Chromium-based browsers (e.g., FireFox, Opera, etc.) and some Chromium-based browser rollouts have not yet happened (e.g., Chrome for Android) but are scheduled to occur in a few months.

Here's a link that shows the old vs. new appearances:

https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html

Among the changes:

* text input fields now have a thicker border (2px) and the focus indicator is a vivid blue outline with rounded corners and 1px white margin

* checkboxes have slightly rounded corners and, when checked, now use a blue background and white checkmark

* range sliders are slim rectangles with rounded corners, are filled with blue to show the current value, and the "thumb" is a blue circle

You can also see some of these changes for inputs in https://tiddlywiki.com/#%24%3A%2FControlPanel, especially for controls in the Info>Basics, Appearance>Toolbars, and Appearance>Theme Tweaks tabs

For the most part, these not-so-subtle changes are generally improvements in the display of form controls, and I suppose we will eventually to get used to the new default styles of these input controls and design our form layouts accordingly.

However, the increased border-width for text input fields is more disruptive for some of my *existing* form layouts:

* when there is a 'stack' of edit fields, the borders of the fields now touch without any vertical whitespace separation.

* borders on textarea and select (listbox/droplist) controls are still 1px thin lines, so they look very different from the new text input control borders

Fortunately, the change in text input control borders can be modified by simple CSS.  To adjust the border thickness back to 1px, just create a tiddler tagged with $:/tags/StyleSheet, and enter this CSS:

input { border-width:1px; }

Note that this does not affect the new text input focus indicator, which will still be a vivid blue outline with rounded corners, but at least it makes the input fields look *almost* like they used to.

-e

[TonyM]

Eric,

Thanks for the well informed heads up.

I do find it funny that browser authors can dictate what we see, without giving us the ability to switch back. I am not fussed about the changes, but some people put a lot of effort into this kind of thing only to have someone else decide "what is better for you", its a little dictatorial. 

Regards

Tony

[Mat]

Thanks Eric!

<:-)