Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 499
Maria Avatar asked Aug 19 '11 20:08

Maria


People also ask

How do you restrict characters in input?

Complete HTML/CSS Course 2022 The HTML <input> tag is used to get user input in HTML. To give a limit to the input field, use the min and max attributes, which is to specify a maximum and minimum value for an input field respectively. To limit the number of characters, use the maxlength attribute.

Can we use CSS to style one half of a character?

The CSS style can be set to a character in vertically half or horizontally half both. Add a class on the text and the class contains CSS style to apply half of the character. The accessibility of the main text is preserved with screen readers for the blind or visually impaired.

Can we use style in input tag?

A style attribute on an <input> tag assigns a unique style to the input control. Its value is CSS that defines the appearance of the input element.


1 Answers

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.

like image 96
zzzzBov Avatar answered Sep 28 '22 07:09

zzzzBov