🔲How to get rid of the default input outline
By default inputs have an outline shown for their on-focus state which overlaps with the input border. Here you'll learn how to avoid this issue.
With the "Designer" card opened, select the input component you want to work on.
Click on "+ Sub-Elements" and select "Input" from the "Elements" options.
Click on "+ Filter" and select "Focus" from the "When" options.
Scroll right to the "Custom" tab, all the way to the end.
In the "CSS Property" input, type "outline".
And then in the "Value" input, type "none".
Finally, click "Add".
That's it, now any border style you give the input would not be overwritten by the default outline style.
Related docs:
PreviousHow to style a rounded bullet-like checkbox for options buttonsNextHow to style a background image
Last updated