For clarity I am using react and mui

I want to change the style of the caret inside the input element and give it an animation. I can change color using caret-color, and I can give it a default blinking speed using autofocus. The blinking speed is some default value, and even if I assign the caret a blinking animation via keyframes and opacity, the default animation still persists causing overlap in blinking states.

Is there a way to disable the default blinking behaviors, or alternatively alter the blinking speed? Additionally in regards to changing the width of the cursor, would I replace the | symbol with some special character like ▌

I dont really have any example code to give since it's a general question

<input autocomplete/>

<TextField/>

CodePudding user response：

For full control of style, you could keep the input but put it out of the viewport, keep the label in the viewport, and use a div to mirror the input value. Apply style and behaviour to the div. However, users of any particular device are used to an input looking like an input on that device, and trying to redesign a wheel that has had huge effort put into it is not necessarily productive, also needs testing on a lot of browsers/devices. Something similar to what you have asked for is at How can I change input blink caret style with easy css, js