0

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

m4heshd
  • 773
  • 9
  • 23

1 Answers1

-1

There is no selector for actual value, however you can use javascript to set an attribute on input event and use that attribute as selector:

document.getElementById("test").addEventListener("input", function(e)
{
  this.setAttribute("value", this.value);
});
input:not([value=""])
{
  background-color: red;
}
<input id="test" value="">
vanowm
  • 9,466
  • 2
  • 21
  • 37
  • I'm sorry but I don't think you understood my question. I don't need to select the input with a specific value. I need to select the visual text part itself so I can do `transform` on it. Thank you for the response though. – m4heshd May 05 '21 at 01:21
  • Please provide minimal code so we can see the issue at hand than. How are you planning on using "value" selector in CSS? – vanowm May 05 '21 at 01:26
  • I don't think it needs any minimal code. Simply indent on blur and focus but with hardware accelerated transitions. That's all. Unfortunately I can't share the code of a closed source project. For you to see the whole picture, I have to share the whole component accompanied by all the dependencies. – m4heshd May 05 '21 at 02:03
  • Well, your question is about "selector for input value", but if I understand you correctly now, it's about moving around text inside an input... I'm not asking for the code from your project, I'm asking for an example so we can see "jittery/laggy" issue. – vanowm May 05 '21 at 02:12
  • this works perfectly smooth for me: https://jsfiddle.net/xbcL9ynz/ – vanowm May 05 '21 at 02:29
  • It works smoothly only because the DOM is not very populated. Things change a lot when the number of DOM nodes increase and more styles, JS stuff are added. All the non-compositing properties that are animated becomes unbearable. I've tried adding a couple hundred table rows to your fiddle but miraculously it works fine though. Still, it's a good practice not to animate that stuff. Sooner or later you run into lagging issues. – m4heshd May 05 '21 at 03:35
  • Well, that's the problem, without actual code that reproduces the issue, how can someone help? We'd have to blindly guess what could possibly work for you and what not, that's just wasting time... – vanowm May 05 '21 at 10:07
  • But it's a well established fact that non-compositing animations are jittery on HTML. So I thought what's the point of proving that again. I just wanted to animate the text inside input using `transform`. – m4heshd May 05 '21 at 23:22
  • I don't believe there is a way access text inside input directly with css, however now I'm intrigued to see an example animation for anything that would be not jittery in your case...If you can provide that, perhaps you could apply it to something like this, where input is "faked" style-wise (for Edge): https://jsfiddle.net/37t8wpne/ – vanowm May 07 '21 at 00:52
  • Thank you for that. But that's also gonna be jittery since `width` is non-compositing. All animations that aren't hardware accelerated becomes laggy when the DOM becomes complex. Only thing that's gonna work in my case is `transform: translateX()` since It's accelerated; – m4heshd May 07 '21 at 01:42