CODEWITHSUNDEEP
javascriptcsspropertiesstylingtextinput
Maria
Maria

Reputation: 71

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 generated 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.

Upvotes: 7

Views: 5385

Answers (4)

JAiro
JAiro

Reputation: 5999

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>

Upvotes: -1

tybro0103
tybro0103

Reputation: 49713

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 "&ndash;".

Upvotes: 0

zzzzBov
zzzzBov

Reputation: 179116

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.

Upvotes: 7

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

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.

Upvotes: 0

Related Questions