Change color of one character in a text box HTML/CSS

Question

I'm designing a web site and i would like to ask you guys that, how can I change the color of just one character in a string in a text box of HTML by CSS?

example : STACK OVER FLOW just the 'A' letter is red!

That's impossible unless you create a rich text custom textbox kind of thing. In a normal textbox(``) it is not possible. — mohkhan, Jun 27 '13 at 11:19

score 77 · Answer 1 · answered Jun 27 '13 at 11:20

77

You can't do this with a regular <input type="text"> or <textarea> element, but with a normal element (like <div> or <p>) made contenteditable, you have all the freedoms of html/css formatting.

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

http://jsfiddle.net/jVqDJ/

The browser support is very good as well (IE5.5+). Read more at https://developer.mozilla.org/en-US/docs/Web/HTML/Content_Editable

answered Jun 27 '13 at 11:20

xec

17,349
3
46
54

1

What if I want to do the same in an input field? – Ali Sajid Sep 03 '19 at 09:52
3

@AliSajid As stated above, you simply cannot. However, the code example does result in an editable field, so you can style it to look and act like a regular `` if you like. – xec Sep 05 '19 at 13:10

score 5 · Answer 2 · answered Mar 16 '20 at 09:48

5

I just want to add to the solution if you want to change color of only first character then there is a CSS selector element::first-letter

example:

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

answered Mar 16 '20 at 09:48

Sumit

300
4
11

Partial Science · Answer 3 · 2021-01-06T07:22:54.977

I can't believe no one has suggested this yet. But if you're ok with a WebKit only solution, you can make a color gradient with discrete separations and apply it to the text like this:

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

This is nice because it's not limited by the tag the text is placed in like some of the other answers. And if you're in a situation where you can't really change the html (for instance if you're using the same style sheet on multiple pages and need to make a retroactive change) this could be helpful. If you can change the html though, xec's answer has much better browser support.

Very creative! Although it does rely on font size (can be overridden by users) and width of the text box (textareas can be resized), and browser like you mention, it is an interesting approach :) — xec, Oct 29 '20 at 13:40
it turns white when text overflow the input element..... Do you know why this is happening.... I am testing on the new Edge EDIT: Just tested happening on Chrome also — wetler, Jan 02 '21 at 13:23
@wetler It seems to be a bug with the text option of -webkit-background-clip in Chrome and Edge (it works as expected in Firefox). Also in chrome if you use a textarea instead of an input it doesn't go white, but the text displayed doesn't update as you scroll which definitely makes it seem like chrome's implementation is buggy when compared to Firefox. Here's an example https://jsbin.com/hakuvefoli/edit?html,css,output. Altogether, and rather unfortunately, I'd say the best "solution" is to limit the length of the text input with maxlength. — Partial Science, Jan 06 '21 at 08:22

score 1 · Answer 4 · answered Jul 14 '21 at 12:38

It is not possible in input but you can change the background color to red if it is not in range using CSS only.

Input number less than 0 or greater than 1000

input:out-of-range {
  background-color: red;
}

<input type="number" min="0" max="1000" />

score -2 · Answer 5 · answered Feb 28 '20 at 13:18

-2

You could try using

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

<spanclass="purple">Var</span> x = "<span class="green">dude</span>";

answered Feb 28 '20 at 13:18

NeoEmberArts

19

eblue · Answer 6 · 2013-06-28T12:56:43.893

-3

From css you can only change an elements property so you need to insert the letter "A" in another element like this:

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

And the CSS part is

span{
   color:#FF0000;
}

Or attach a class to it like this

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

CSS:

span.myRedA{
       color:#FF0000;
    }

edited Jun 28 '13 at 12:56

answered Jun 27 '13 at 11:23

eblue

109
1
3
12

score -4 · Answer 7 · answered Jan 09 '18 at 18:49

-4

you could use bold tags A

css:

b {
font-color: red;
}

answered Jan 09 '18 at 18:49

Endgamers

37
1

score -9 · Answer 8 · edited Oct 18 '14 at 19:09

-9

<font color="#colors">text text text</font>

edited Oct 18 '14 at 19:09

Alex Celeste

12,824
10
46
89

answered Oct 18 '14 at 18:53

Pixie Lumis Serigala

11

That is pre-historic HTML. Not recommended at all. – FedeKrum Apr 18 '23 at 03:25

Change color of one character in a text box HTML/CSS

8 Answers8

Linked