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
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;
}
<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="c1"></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.
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
<font color="#colors">text text text</font>
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;
}
You could try using
<style>
span.green{
color:green;
}
span.purple{
color:purple;
}
</style>
<spanclass="purple">Var</span> x = "<span class="green">dude</span>";
you could use bold tags A
css:
b {
font-color: red;
}