Different styles for a single input

[gfender]

I've been messing with this for awhile and I can't figure it out (if it's even possible). I'm trying to have multiple styles within one input box. The problem is the value is translated as pure text with no html so the following wouldn't do anything:

<input type="text" name="txt1" value="<b>value:</b> result">

I'm trying to have the first word in the input box be bold and the second be normal. I don't want to just put the value on the outside of the box because i want them together. Does anyone know how to do this or if it's even possible? Maybe there's a trick to making it look like there are multiple values within one box but there are really two. This doesn't need to be submitted, it's only for viewing.

Thanks a lot!

 

[tviman]

If it's only for viewing, why does it have to be an "input"? Would be really easy without it. Besides, I don't see a way to do what you're looking for with and input tag.

There's always a better way. The fun is trying to find it!

 

[gfender]

It has to be something that you can type into because I am using javascript to validate the input typed.

 

[gfender]

I was looking around trying to find some examples of how this is done and Google Suggest uses it. Do you know how they apply the different styles on their suggest text?

http://www.google.com/webhp?complete=1&hl=en

 

[tsdragon]

Use a style on it, like this:

<input type="text" name="txt1" style="font-weight:bold;" value="somevalue">

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[gfender]

That would work if i wanted the whole input text to be bold but I want half to be bold and half to not be bold.

 

[tsdragon]

I don't believe it's actually possible to have multiple attributes in the same text box. If someone is doing it, it's a neat trick. I'd love to know how.



Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[gfender]

The solution, for my code at least (emulating google suggest), is to position a DIV over the input box and then apply formatting to the DIV. This doesn't allow input to the box but at least it looks formatted. I guess this doesn't really solve my problem because I can't have the user edit it directly. So it comes back to just positioning a layer and formatting it rather than having an input box.

Thanks for the ideas on this one, I wish it could be done.