Unique CSS styles for "+" and "-" when user types in input

Question

When the user types in + in my input, I would like the + to be green

Ex: +10000 --> "+" should be green and 10000 should be black

When the user types in - in my input, I would like the - to be red

Ex: -10000 --> "-" should be red and 10000 should be black

My idea was to use ::first-letter, but I realize it doesn't work on input

Is this possible at all with css and javascript? Do I need some fancy Regex to accomplish this?

input {
  font-size: 100px;
}

/* only - should be red */
input::first-letter {
  color: red;
}

/* only + should be green */
input::first-letter {
  color: green;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="styles.css" />
    <title>Static Template</title>
  </head>
  <body>
    <input type="text" />
  </body>
</html>

Looks can't from [other question](https://stackoverflow.com/questions/18397450/select-first-letter-of-input-value-and-change-its-color-via-css) — fixiabis, Dec 01 '21 at 01:01
@pilchard But even if I recognize the first letter of the input using `keyup` how would I just select that character to change the color when it's all one clump of html in my input? — dev_el, Dec 01 '21 at 01:02
Does this answer can solve your problem? https://stackoverflow.com/a/18397496/6670191 — fixiabis, Dec 01 '21 at 01:09
I think that you can't implement that function when you use the 'input' tag. If you want to it then maybe you should use another method (ex: contenteditable div) — Web Star, Dec 01 '21 at 01:09
You can't do this in a standard input element. You would need to use a replaced element, perhaps a content editable div that updates a hidden field for the actual value. You would alos need to wrap your styled elements in a span — Jon P, Dec 01 '21 at 01:20

Obsidian Age · Accepted Answer · 2021-12-01T01:19:45.770

1

First get the <input> element with .getElementsByTagName('input')[0], then you can attach an event listener on keyup. From here, you can use .style.color to update the color based on .value[0]:

const target = document.getElementsByTagName('input')[0];
target.addEventListener('keyup', function() {
  if (this.value[0] === '-') {
    this.style.color = 'red';
  }
  else if (this.value[0] === '+') {
    this.style.color = 'green';
  }
  else {
    this.style.color = 'black';
  }
})

input {
  font-size: 100px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="styles.css" />
  <title>Static Template</title>
</head>

<body>
  <input type="text" />
</body>

</html>

Note that the above snippet only checks the first character inputted. If you want to check for any occurrence of the target character, you can loop over the .value.

edited Dec 01 '21 at 01:19

answered Dec 01 '21 at 01:17

Obsidian Age

41,205
10
48
71

Is there a way to not make the whole text change color but only "+" and "-" ? Ex +10000 --> only + is green, 10000 does not change color Ex -10000 --> only - is red, 10000 does not change color – dev_el Dec 01 '21 at 01:19
It will change the whole word color. – Web Star Dec 01 '21 at 01:20
So no way to separate colors of different text characters in the same input? – dev_el Dec 01 '21 at 01:21
1

In order to change only the color of the first character, the corresponding element must be regarded as an HTML element, so I don't think it can be done with a value of input tag – Web Star Dec 01 '21 at 01:23
1

Silverstar is correct; I'm fairly certain that the only way to achieve setting *only* the first character would be to have it as a separate HTML element. It's possible to trigger `::first-letter` through JavaScript, but again, it doesn't apply to ``. – Obsidian Age Dec 01 '21 at 01:25
You can avoid the lag by listening to `input` instead of `keyup` – pilchard Dec 01 '21 at 01:26
as @Silverstar and Obsidian Age has stated, a perfect solution to this question is impossible because I would need a separate HTML element. I will select this as the answer because it seems to be the closest possible solution to this question. – dev_el Dec 01 '21 at 01:32

Unique CSS styles for "+" and "-" when user types in input

1 Answers1