🔲
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.
- 1.With the "Designer" card opened, select the input component you want to work on.
- 2.Click on "+ Sub-Elements" and select "Input" from the "Elements" options.
- 3.Click on "+ Filter" and select "Focus" from the "When" options.
- 4.Scroll right to the "Custom" tab, all the way to the end.
- 5.In the "CSS Property" input, type "outline".
- 6.And then in the "Value" input, type "none".
- 7.Finally, click "Add".
That's it, now any border style you give the input would not be overwritten by the default outline style.