Change Color of One Character in a Text Box HTML/CSS

Change specific character color in CSS writen textbox on hover

If you can add text to HTML (depends on your demands) add "CODE STUDENT" inside HTML's tag and use such styles:

#CODESTUDENT:hover::before {
  content: "<";
  color:red;
}

#CODESTUDENT{
  opacity:0;
}

#CODESTUDENT:hover{
  opacity:1;
}

#CODESTUDENT:hover:after {
  content: ">";
  color: red;
}

You can always remove styles for #CODESTUDENT and it'll remain on site.
https://codepen.io/ptr11dev/pen/dEOdxQ

Changing the color of one character within a word without changing the kerning properties of the word?

You just need to keep it on one line!

You could use:

<span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">Ic</span><span class="u-text-uppercase u-text-color-md-pink-a200 u-font-weight-900">o</span><span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">n</span><span class="u-text-uppercase u-text-color-md-grey-800 u-font-weight-100">Utility Tests</span>

or:

<span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">Ic<span class="u-text-color-md-pink-a200">o</span>n</span>

Or you could just use font-size: 0 on parent & reset its children font-size or use float: left and a  

.third {  font-size: 0;  }
.third span {  font-size: 16px;  }
.fourth span {  float: left;}

<strong>First:</strong><br><span class="first">Ic<span>o</span>n</span> <span>Utility Tests</span>
<br><br><strong>Second:</strong><br>
<span class="second"><span>Ic</span><span>o</span><span>n</span><span>Utility Tests</span></span>
<br><br><strong>Third:</strong><br>
<span class="third"><span>Ic</span><span>o</span><span>n </span><span>Utility Tests</span></span>
<br><br><strong>Fourth:</strong><br>
<span class="fourth"><span>Ic</span><span>o</span><span>n </span><span> Utility Tests</span></span>

How to change a single character color in textarea

I changed the textarea by a content editable div:

<div contenteditable="true"></div>

div {width:98%;clear: both;font-size: 10pt;max-width:98%;height:250px;min-height:98%; 
      left:10px;right:10px;background-color:#fff;border:1px solid #1c578d;bottom:10px;top:10px;color:#1B4A90;overflow:auto;
      display:inline;}

change color css only first 6 character of text

How about using :before?

I would change the text from "Client Testimonial" to "Testimonial", and then with CSS apply the :before rule:

HTML:

<div class="word">Testimonial</div>​​​​​​​​

CSS:

.word {
 color: black;       
}
.word:before {
 color: red;
 content: "Client ";
}

Example: http://jsfiddle.net/LvZt7/

Change specific character color in whole of the text

It's not possible with css only, but you can use javascript for that. For example:

Array.prototype.forEach.call(document.getElementsByTagName("p"), function(el) {  el.innerHTML = el.innerHTML.replace(/\*/g, "<span class='color-red'>*</span>");});

.color-red {  color: red;}

<p>Pedram Marandi * is a developer * He works at Foolanja.</p>

---

Related Topics