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

【问题标题】：CSS style specific characters inside a text input文本输入中的 CSS 样式特定字符
【发布时间】：2011-10-30 22:27:13
【问题描述】：

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

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

生成的txt示例：“4 - 6 - 9 - 8 - 2”

换句话说，我想要红色的数字和蓝色的“-”。

我很想知道如何做到这一点。我将不胜感激。

【问题讨论】：

标签： javascript css properties styling textinput

【解决方案1】：

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

【讨论】：

这里有一个例子：stackoverflow.com/questions/4845813/…

【解决方案2】：

如果不将某种元素环绕在您想要设置样式的部分周围，您将无法设置字符串文本的样式，例如 <span>。然后，您将使用 CSS 来设置 <span> 的样式。

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

【讨论】：

仔细阅读问题：This text is send to a input box.

【解决方案3】：

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

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

再想一想，您可以将“-”替换为“–”。

【讨论】：

【解决方案4】：

您不能设置破折号（“-”）的样式，但您可以为每个数字和破折号创建一个跨度。然后分配给每个不同的类。

类似的东西。

<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>

【讨论】：

注意字符串是插入到输入中的。
@Rikudo Sennin：我知道出于这个原因我建议为每个字母创建一个 cronttrol。
1.什么是 cronttrol？ 2. 不能在输入元素中使用 span。
对不起，我想说标签，而且我知道我不能在输入中使用跨度，我提出了类似这样的
4-4