Just to clarify, I am working with React and Material-UI.
I have a task at hand where I need to modify the appearance of the caret within an input element by adding an animation to it. I have managed to change its color using caret-color and set a default blinking speed with autofocus. However, even after trying to add a custom blinking animation through keyframes and opacity properties, the default animation still remains, resulting in conflicting blinking states.
Is there any way to turn off the default blinking behavior or adjust the speed of the blinking instead? Furthermore, when it comes to adjusting the width of the cursor, would replacing the standard | symbol with a special character like ▌ be the solution?
Unfortunately, I do not have any specific code examples to provide as this is more of a general inquiry.
<input autocomplete/>
<TextField/>