CSS style specific characters inside a text input

I have a script that generates text when a user press a button. This text is sent to an input box, so when I press the button some text appears in one input box.

I would like to know if there's any CSS property to style the color of all the "-" characters that appear in the input box dividing the numbers.

Example of the gen开发者_如何转开发erated txt: "4 - 6 - 9 - 8 - 2"

In other words I want the numbers red and the "-" blue.

I would love to know how I can do this. I would be very much appreciated.

You can't have multi-styled text within a input:text element. You'll need to use a custom text element using a div with contenteditable if you want formatted text.

You cannot style a string text without wrapping some sort of element around the parts you wish to style, like a <span>. You would then use CSS to style the <span>.

You need to use JavaScript to manipulate this. Also, you cannot have different style for different parts of an <input>, you whuld need to copy the value into the DOM as its own element.

Use a <div contenteditable="true"></div> instead of text input. Make an image that represents your dash. On the keyup event replace all dashes with your image. On form submit, copy the div text, replace the img's with dashes, and then put the text into a <input type="hidden" />.

The reason I say to use images instead of an actual dash is so you don't end up with <span><span><span>-</span></span></span>.

On second thought, you could replace "-" with "–".

you can not style your dashs ("-") but you could create a span for each number and dash. and then asssign to each one diferents classes.

Something like this.

<div>
    <span class="red">4</span>
    <span class="green">-</span>
    <span class="red">7</span>
    <span class="green">-</span>
    <span class="red">3</span>
</div>