输入中的实际文本是不是有 CSS 选择器？ （对于“文本缩进”替代）[重复]

Posted 2023-03-22

【中文标题】输入中的实际文本是不是有 CSS 选择器？ （对于“文本缩进”替代）[重复]

【英文标题】：Is there a CSS selector for the actual text inside an input? (for a "text-indent" alternative) [duplicate]输入中的实际文本是否有 CSS 选择器？ （对于“文本缩进”替代）[重复]

【发布时间】：2021-07-27 08:05:45

【问题描述】：

我需要使用 transform 执行动画，这将在文本输入中模仿 text-indent 的功能，因为动画 text-indent 最终会变得紧张/滞后。在 Electron 上执行此操作，因此可以在 Chrome 中运行的任何内容都很好。

我发现了 ::-ms-value 选择器，但这似乎在 Chrome 上没有任何作用。使用包装器 div 并移动整个输入对我来说也不是一个选择，因为它是一个庞大的 Vue 组件，已经编写并且非常复杂。使用 wrapper 方法将需要痛苦的数​​天之久的完整组件重写。

如果没有选择器，任何解决我的问题的替代方法将不胜感激。我也不介意通过 JS 来做。动画需要在输入的focus 和blur 事件上发生。

这是修复这种滞后的恐怖的最后一步。

【参考方案1】：

没有实际值的选择器，但是您可以使用 javascript 在input 事件上设置属性并将该属性用作选择器：

document.getElementById("test").addEventListener("input", function(e)

  this.setAttribute("value", this.value);
);

input:not([value=""])

  background-color: red;

<input id="test" value="">

【讨论】：

很抱歉，但我认为您没有理解我的问题。我不需要选择具有特定值的输入。我需要选择可视文本部分本身，这样我就可以在上面做transform。不过感谢您的回复。

请提供最少的代码，以便我们可以看到手头的问题。你打算如何在 CSS 中使用“值”选择器？

我认为它不需要任何最少的代码。只需缩进模糊和焦点，但使用硬件加速转换。就这样。不幸的是，我不能分享封闭源代码项目的代码。为了让您看到全貌，我必须分享整个组件以及所有依赖项。另外仅供参考，我没有否决您的回答。

好吧，你的问题是关于“输入值的选择器”，但如果我现在理解正确的话，它是关于在输入中移动文本......我不是要你的代码项目，我要一个例子，所以我们可以看到“jittery/laggy”问题。

这对我来说非常顺利：jsfiddle.net/xbcL9ynz