9

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 accomplished?

Mike Fielden
  • 10,055
  • 14
  • 59
  • 99
Collin Estes
  • 5,577
  • 7
  • 51
  • 71
  • I know of no way to get a browser to style text character-by-character in an `` field, but I'll take this opportunity to plug [Lettering.js](http://letteringjs.com/) :-) (It won't solve the problem, unfortunately.) – Pointy May 23 '11 at 18:12

4 Answers4

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.net/PpEx7/

EDIT

Nopez not possible. :)

PeeHaa
  • 71,436
  • 58
  • 190
  • 262
  • Yeah I would assume that work I was just wondering if there was anyway to do it within the input so I have all the other features/functionality of the input as well. I would think it is quite possible that you can't do that with an input. – Collin Estes May 23 '11 at 18:09
  • Doesn't look possible, dude. Looks like you'll have to use some kind of wrapper HTML like this guy says. – Rodger Cooley May 23 '11 at 18:12
  • Using `` instead of `` :( – Raynos May 23 '11 at 18:13
  • 1
    @Raynos: I know. That's just me being lazy ATM ;) – PeeHaa May 23 '11 at 18:17
  • Is this a cross browser solution though? That is an HTML5 standard (an awesome one at that) but it doesnt seem like IE would support that... Im not sure just asking – Mike Fielden May 23 '11 at 18:19
  • I do think you are probably right PeeHaa that it isn't possible I'll let the question stay unanswered for a while just in case but I'll give it to you as long as somebody doesn't figure out a way to do it within an input. I suspected it wasn't possible but figured I would ask just in the off chance it is. – Collin Estes May 23 '11 at 18:20
  • @Mike: You won't believe this one: even IE support it :) http://caniuse.com/contenteditable – PeeHaa May 23 '11 at 18:22
  • @PeeHaa... Youre right i dont believe it! :) But i did open your fiddle with ie8 and it seems to work just fine... Well well well look who decided to join the FUTURE – Mike Fielden May 23 '11 at 18:24
  • @Collin: of course. Although I really don't think it is possible. I've seen some great people coming up with some great code to prove me wrong in the past :) – PeeHaa May 23 '11 at 18:24
  • 1
    @Mike, @PeeHaa: Microsoft *invented* contenteditable and IE had it a full 4 years before any other browser, so credit where it's due :) – Tim Down May 24 '11 at 12:22
  • @Tim: I thought so. But I couldn't find any articles on a quick search. – PeeHaa May 24 '11 at 13:40
  • 1
    @PeeHaa: This is quite a good history of contenteditable in browsers: http://blog.whatwg.org/the-road-to-html-5-contenteditable – Tim Down May 24 '11 at 13:46
1

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

Basically, they

or

both ways are not trivial...

Community
  • 1
  • 1
rdmueller
  • 10,742
  • 10
  • 69
  • 126
1

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

Raynos
  • 166,823
  • 56
  • 351
  • 396
0

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.

Fredrik
  • 2,016
  • 3
  • 15
  • 26