Wondering if this is even possible, but if I have a input containing text, for example lets say the word 'Test' is in the input. What I would like to be able to do is change the styling on the individual letters of the word 'Test'

I would like the 'Te' to be bold and then have the 'st' be regular.

It wouldn't have to be bold, maybe I would like the 'e' to be red or something like that.

Any ideas on how this might be acplished?

Wondering if this is even possible, but if I have a input containing text, for example lets say the word 'Test' is in the input. What I would like to be able to do is change the styling on the individual letters of the word 'Test'

I would like the 'Te' to be bold and then have the 'st' be regular.

It wouldn't have to be bold, maybe I would like the 'e' to be red or something like that.

Any ideas on how this might be acplished?

• javascript
• jquery

Share Improve this question Follow edited May 23, 2011 at 18:14 Mike Fielden 10.2k1414 gold badges6060 silver badges100100 bronze badges asked May 23, 2011 at 18:04 Collin EstesCollin Estes 5,80977 gold badges5353 silver badges7171 bronze badges 1

• I know of no way to get a browser to style text character-by-character in an <input> field, but I'll take this opportunity to plug Lettering.js :-) (It won't solve the problem, unfortunately.) – Pointy Commented May 23, 2011 at 18:12

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Don't think it is possible (will do some more test).

What about adding a contenteditable div which looks like a input?

Simple contenteditable exmaple: http://jsfiddle/PpEx7/

EDIT

Nopez not possible. :)

You should take a look at how HTML WYSIWYG editors are build.

Basically, they

• hide the input field and display another html element with the styled content: Highlight text as you type on textarea

or

• use design mode in html: javascript Rich Text Editors

both ways are not trivial...

If you take a look at the MDN CSS Reference you can see for yourself that there is no selector for single letters inside a field.

The best you can do is use :first-letter

But As you can see it does not work on <input />

No it's not possible with an <input type="text"> tag. You can however trick the user into believing he is using a styled input by replacing it with a contendeditable div or something.

However, I looked into this couple of years ago, and it's a mess if you want a reliable cross browser solution for this. Unless I remembered wrong the html from just showing a bold text in a contenteditable div could easily result in the following across the major browsers:

<BOLD style="font-weight:bold">Bold</BOLD> <!-- IE -->
<span style="font-weight:bold">Bold</span> <!-- Chrome -->
<b>Bold</b> <!-- Firefox -->
<strong>Bold</strong> <!-- Safari -->
<lol style="fOnt-WEIGHT: bold;">Bold</lol> <!-- IE6 -->

No kiddin.