32

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

示例：STACK OVER FLOW 只是“A”字母是红色的！

4

8 回答 8

70

您不能使用常规<input type="text">或<textarea>元素来执行此操作，但使用普通元素（如<div>or <p>） made 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阅读更多内容

于 2013-06-27T11:20:40.440 回答
3

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

例子：

div::first-letter{
   color: red;
}
于 2020-03-16T09:48:14.140 回答
2

我不敢相信还没有人提出这个建议。但是，如果您对仅使用 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 的答案具有更好的浏览器支持。

于 2020-10-13T08:16:52.103 回答
0

在输入中是不可能的，但是red如果它不在范围内，您可以仅使用 CSS 将背景颜色更改为。

输入数小于0或大于1000

input:out-of-range {
  background-color: red;
}
<input type="number" min="0" max="1000" />

于 2021-07-14T12:38:09.243 回答
-2

你可以尝试使用

<style> 
span.green{ 
     color:green; 
    } 
span.purple{ 
       color:purple; 
    } 
</style> 

<spanclass="purple">Var</span> x = "<span class="green">dude</span>";
于 2020-02-28T13:18:12.537 回答
-4

在 CSS 中，您只能更改元素属性，因此您需要在另一个元素中插入字母“A”，如下所示：

ST<span>A</span>CK OVER FLOW just the 'A' letter is red!

CSS部分是

span{
   color:#FF0000;
}

或者像这样附加一个类

ST<span class="myRedA">A</span>CK OVER FLOW just the '<A' letter is red!

CSS：

span.myRedA{
       color:#FF0000;
    }
于 2013-06-27T11:23:59.137 回答
-5

你可以使用粗体标签 A

CSS：

b {
font-color: red;
}
于 2018-01-09T18:49:51.480 回答
-9 
<font color="#colors">text text text</font>
于 2014-10-18T18:53:18.090 回答