1. Home
  2. Help Center
  3. Focus Transition
  4. Focus Transition CSS Customisations

Focus Transition CSS Customisations

Focus Transition CSS Customisations

The Focus Transition styling is very simple if you understand the CSS selectors and their meanings.

Focused Element

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.

Accessibility concerns

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.

Was this article helpful?
Help us make these docs great!

See something that's wrong or unclear?
Submit an issue and we will fix it.

Submit issue
Share your thoughts