CSS-specific characters inside text input

Question

I have a script that generates text when the user clicks a button. This text is sent to the input field , so when I click the button, one text appears in the text field.

I would like to know if there is any CSS property for the color style of all the "-" characters displayed in the input field dividing the numbers.

An example of a generated txt: "4 - 6 - 9 - 8 - 2"

In other words, I want the numbers to be red and the blue to blue.

I would like to know how I can do this. I would be very grateful.

Answer 1

You cannot have multiple text inside the input:text element. For formatted text, you will need to use a custom text element using a div with contenteditable .

Answer 2

You cannot stylize string text without wrapping some element around the parts you want to stylize, such as <span> . Then you used CSS for the <span> style.

For this you need to use JavaScript. Also, you cannot have a different style for the different parts of the <input> , you will need to copy the value into the DOM as your own element.

Answer 3

Use <div contenteditable="true"></div> instead of entering text. Make an image representing your dash. In the keyup event, replace all dashes with your image. In the submit form, copy the div text, replace the img dash, and then put the text in <input type="hidden" /> .

The reason I say using images instead of the actual dash is because you are not getting <span><span><span>-</span></span></span> .

Alternatively, you can replace "-" with "& ndash;".

Answer 4

you cannot erase your dashes ("-"), but you can create a range for each number and dash. and then map each of them to different classes.

Something like that.

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