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
You should take a look at how HTML WYSIWYG editors are build.
Basically, they
or
both ways are not trivial...
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.
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 />
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.net/PpEx7/
EDIT
Nopez not possible. :)