Is there a CSS selector for the actual text inside an input? (for a "text-indent" alternative)

  css, electron, google-chrome, html, javascript

I have this need to perform animations using transform that will mimic the functionality of text-indent in a text input because animating text-indent ends up jittery/laggy. Doing this on Electron so anything that’ll work in Chrome is good to go.

I’ve found out about the ::-ms-value selector but that doesn’t seem to do anything on Chrome. Using a wrapper div and moving the whole input is also not an option for me since It’s a massive Vue component that’s already written and very complicated. Using the wrapper approach would require a painful days-long complete rewrite of the component.

If there’s no selector, any alternative to solve my issue would be appreciated. I wouldn’t mind doing it via JS too. Animation needs to happen on focus and blur events of the input.

It’s the last step of fixing this laggy horror.

enter image description here

Source: Ask Javascript Questions

LEAVE A COMMENT