Как можно сделать у одного целого числа шрифт разных цветов в теге input и чтобы между точкой и двумя нулями не было пробелов?

Question

[otgorn]

<input class="input" name="sum_exchange" id="sum_exchange" type="text" value="1000.">
<span class="two-00">00</span><code lang="css"> 
</code>
input.input{
outline: none;
border: none;
padding-left: 97px;
width: 48px;
font-size: 20px;
}
.two-00{
font-size: 20px;

}

Answer 1

[Алексей Ярков]

Как-то так:
https://jsfiddle.net/yarkov_aleksei/2s5j3g7x/

<input class="input" name="sum_exchange" id="sum_exchange" type="text" value="1000."><span class="two-00">00</span>

input.input {
  outline: none;
  border: none;
  padding-left: 97px;
  width: 48px;
  font-size: 20px;
}
.two-00 {
  margin-left: -1px;
  font-size: 20px;
  color: gray;
}

Но зачем вам точка в инпуте - не понимаю.

Answer 2

[Ankhena]

Градиентом

Количество введенных символов считайте на js и подставляйте в --color-width

Comments

[otgorn]

спасибо, получилось)