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 -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e2b2d381-5c68-4ae1-8d29-ac3623de7a52%40googlegroups.com.
