文本输入中的CSS样式特定字符

CSS style specific characters inside a text input

本文关键字：字符 样式 CSS 输入 文本      更新时间：2023-09-26

我有一个脚本，当用户按下按钮时生成文本。这个文本被发送到一个输入框，所以当我按下按钮时，一些文本出现在一个输入框。

我想知道是否有任何CSS属性来设置出现在输入框中划分数字的所有"-"字符的颜色。

生成的文本示例:"4 - 6 - 9 - 8 - 2"

换句话说，我希望数字是红色的，"-"是蓝色的。

我很想知道我怎样才能做到这一点。非常感谢。

在input:text元素中不能有多样式的文本。如果你想要格式化文本，你需要使用div和contenteditable自定义文本元素。

如果不在希望设置样式的部分(如<span>)周围包装某种元素，则无法设置字符串文本的样式。然后，您可以使用CSS来设置<span>的样式。

您需要使用JavaScript来操作它。此外，您不能为<input>的不同部分设置不同的样式，您需要将值复制到DOM中作为其自己的元素。

使用<div contenteditable="true"></div>代替文本输入。制作一个代表你的破折号的图像。在keyup事件中，用图像替换所有的破折号。在表单提交时，复制div文本，用破折号替换img，然后将文本放入<input type="hidden" /> .

我说使用图像而不是实际的破折号的原因是这样你就不会以<span><span><span>-</span></span></span>结束。

仔细想想，你可以用"–"代替"-"。

你不能设置破折号("-")的样式，但是你可以为每个数字和破折号创建一个span。然后给每个人分配不同的类。

就像这样。

<div>
    <span class="red">4</span>
    <span class="green">-</span>
    <span class="red">7</span>
    <span class="green">-</span>
    <span class="red">3</span>
</div>
相关文章：