How to make cursor blinking on the focus input? about react-verification-input HOT 6 CLOSED

I added a complete example to the docs.

from react-verification-input.

Depends on what you mean by "blinking cursor":

• If you mean a native cursor: This is not possible since the visible part of the component is not acutally an input element.
• If you mean the selected field indicator: You can make it blink using a css animation like so:

.character--selected {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    outline: orange 3px solid;
  }
  50% {
    outline: orange 3px solid;
  }
  51% {
    outline: none;
  }
  100% {
    outline: none;
  }
}

from react-verification-input.

Thanks I've figured it out using a similar solution

from react-verification-input.

@broodfusion were you able to make this look like a real cursor?

from react-verification-input.

The example doesn't properly align the baseline of the character and the blinker...

from react-verification-input.

It's an example to use as a starting point.
Feel free to adapt the values, as they depend on the concrete typeface, etc.
That's also why this is not built into the library.

from react-verification-input.