The Focus Transition styling is very simple if you understand the CSS selectors and their meanings.
Here is a listing of useful CSS selectors to customize the focused element.
CSS Selector | Description |
body :focus, body :focus-visible | These selectors are used to style focus state of any element on the page. |
.some-class :focus, .some-class :focus-visible | These selectors are used to style focus state of any element inside container with class .some-class . |
.input-class:focus, .input-class:focus-visible | These selectors are used to style focus state individually for each element with class .input-class . |
Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun).
If you have any problems with styling, or you can’t achieve your desired style, please contact with our support team.
See something that's wrong or unclear?
Submit an issue and we will fix it.