Field With Focus

One of my earliest Ask-Reuben articles dealt with how to make the field with focus more obvious.  One of the points in that article was that you should not try to do too much as you’d expect that the experts at Microsoft, Apple, etc in their design of Native User Interfaces would have come up with something suitable.  However like many I found that the way Checkbox, Radiogroup widgets were rendered when they had the focus was hard to discern, and by adding a few lines into a .4st you had a better solution.

Roll on a few more years, with Universal Rendering, you are relying on Four Js and web technologies for the underlying user interface, instead of a native user interface built on top of the user interface provided by the front-end operating system.

In the 5.01.00 GBC Maintenance Release (and with a bit of fine-tuning in subsequent releases), there was a New Visual Feedback Framework  introduced for when the user hovers,  clicks, touches, and focuses on form items.

For field widgets, the changes are implemented as follows:

• When hovering, a thick gray outline appears around the field.
• When clicking or touching it, a thick, faded blue outline appears for a few moments.
• And when focusing the field, a thick blue outline is present.

For buttons, the visual feedback is slightly different:

• When hovering or clicking, the button appears slightly paler.
• When focusing, a white border appears inside the button.

As a result, these entries you might have added to a .4st in the past to improve appearance when a field has the focus, these should be reviewed as there is a good probability they can be removed.

If you want to make changes to this visual feedback, you have what is available via GBC Customizaton and in particular theme variables.

For instance if you want to change the focus to something different than  a “thick blue outline” you have the Material Field Borders theme variables at your disposal.

You might start with …

mt-field-focus-border-width-top: 0
mt-field-focus-border-width-left: 0
mt-field-focus-border-width-bottom: 3
mt-field-focus-border-width-right: 0

… to have the focus as an underline rather than an outline, or you might set …

mt-field-border-radius: 5

… to have rounded corners.

With the new Genero Theme Customizer (GTC) which is Early Access Program at the moment which you are welcome to join, it is very simple to prototype these changes.  Using the same form as for my earlier article, these screenshots show GTC being used to prototype focus just being an underline, and with emphasised rounded corners just by changing some theme variables.