Hi all,
I am attempting to create a view to be embedded in a flex repeater that allows the user to enter some machine settings.
Some of the settings have a unit of measure associated with them (UOM label component will display this) and I wanted to display this within the input field. What I did was nest a Numeric Entry Field and the UOM Label within a container and apply our style class, for input fields, to the container. However, after removing all default borders from the Numeric Entry Fields style & container style the border is still highlighted when the field is focused on.
I also tried using a style class that had rules setting border-style to 'none' when for the 'focus' element state, but that did not work either.
Component Structure:
Border highlighting + example with UOM label nested:
Without UOM label:
I would like to have this default border highlighting disabled somehow. (I will widen the container's border on focus instead)
If there is any more info needed, please let me know and I can provide it.
Using the Chrome ColorZilla plugin we can identify the color as #229AD6.
Using the browser's Developer Tools we can find where that's used.
Figure 1. The theme's definition after I had overridden it.
Add the CSS below into your Project Browser | Perspective | Styles | stylesheet.css. (Right-click, Advanced Stylesheet, if you haven't turned it on yet.)
:root {
--callToAction--hover: #229AD600;
}
It overrides the theme's color with the same color but with transparency set to 00 (in the 7th and 8th hex character).
This will work with light / dark themes automatically.
Note that the color variable may be used on other components.
3 Likes
You should really use the focus-visible pseudo class for this instead of changing the colour.
The reason the input components have a focus outline is due to them having a focus pseudo class selector applied to them (by ia styles) that gives them an outline. This applies to the component whenever the component has input focus. However the focus-visible pseudo class was more recently added which is used to more intelligently determine when focus actually needs to be shown, such as when tabbing between components. So really, you should be disabling the focus pseduo class selector and replacing it with the focus-visible version instead.
There's also focus-within which will apply to parent components if any of its children inputs are in focus
I don't have an example for that component, but here's what i use to disable focus outlines for popups (I never want these to have an outline, focus-visible is irrelevant here) :
div[id^="popup-"]:focus {
outline: none !important;
}
5 Likes
Good work, Nick. I had a look around but didn't come across those styles.
Thanks for this info, Nick! I was able to fix some issues I was having applying styles to the container of the input field.
Before I was using the onFocus event of my input field within to trigger the style change for the container, but that was slow and tended to lag behind if you were clicking/tabbing through these fields quickly.
I added the new rule with the focus-within pseudo-selector to the class in the stylesheet, and it works much better this way.
1 Like