在文本框HTML/CSS中更改一个字符的颜色

Question

我正在设计一个网站,我想问你们,如何通过CSS改变HTML文本框中字符串中一个字符的颜色？

例如:STACK OVER FLOW只是'A'字母是红色的!

多谢你们

Answer 1

你不能用常规<input type="text">或<textarea>元素来做这件事,但是使用普通元素(如<div>或<p>)contenteditable,你拥有html/css格式的所有自由.

<div contenteditable>
    ST<span style="color: red">A</span>CK OVERFLOW
</div>

http://jsfiddle.net/jVqDJ/

浏览器支持也非常好(IE5.5 +).更多信息,请访问https://developer.mozilla.org/en-US/docs/Web/HTML/Content_Editable

Answer 2

我只想添加到解决方案中，如果您只想更改第一个字符的颜色，那么有一个 CSS 选择器元素::first-letter

例子：

div::first-letter{
   color: red;
}

Answer 3

我不敢相信还没有人建议过这一点。但是，如果您同意仅使用 WebKit 解决方案，则可以制作具有离散分色的颜色渐变并将其应用到文本，如下所示：

.c1 {
  background: linear-gradient(to right, black 0% 1.19em, red 1.19em 1.9em, black 1.9em 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.c2 {
  color: white;
  background: linear-gradient(to right, black 0% 1.19em, red 1.19em 1.9em, black 1.9em 100%);
  
}

input{
  font-family: "Courier New", Courier;
}

.c3 {
  background: linear-gradient(to right, black 0% 1.4em, red 1.2em 1.95em, black 1.95em 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1 class="c1">
STACK OVER FLOW
</h1>
This is what the gradient looks like with the text over it:
<h1 class="c2">
STACK OVER FLOW
</h1>
It even works on input forms, however you'll want to change the font to a Monospaced font like Courier so the color always lines up with the same letter:
<h1>
<input type="text" class="c3"></input>
</h1>

这很好，因为它不像其他一些答案那样受到文本所在标签的限制。如果您处于无法真正更改 html 的情况（例如，如果您在多个页面上使用相同的样式表并且需要进行追溯更改），这可能会有所帮助。如果你可以改变 html，xec 的答案有更好的浏览器支持。