🔲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.

Related docs: