38

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!

1
  • 2
    That's impossible unless you create a rich text custom textbox kind of thing. In a normal textbox(<input type="text"/>) it is not possible.
    – mohkhan
    Jun 27, 2013 at 11:19

8 Answers 8

78

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

2
  • 1
    What if I want to do the same in an input field?
    – Ali Sajid
    Sep 3, 2019 at 9: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 <input> if you like.
    – xec
    Sep 5, 2019 at 13:10
6

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;
}
5

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.

3
  • 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, 2020 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 2, 2021 at 13:23
  • 1
    @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 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. Jan 6, 2021 at 8:22
1

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

-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>"; 
-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;
    }
0
-4

you could use bold tags A

css:

b {
font-color: red;
}
-9
<font color="#colors">text text text</font> 
1
  • That is pre-historic HTML. Not recommended at all.
    – FedeKrum
    Apr 18, 2023 at 3:25

Not the answer you're looking for? Browse other questions tagged or ask your own question.