Как я могу раскрасить текст друг на друге?

Question

Я сделал 2 ввода type = "text". И я хочу раскрасить тексты на них в разные цвета. Только в файле css. (Не в файле html.) Как их покрасить?

HTML

<form class="js-form form">
  <input type="text" name="write_name" placeholder="What is your name?" />
</form>

<form class="js-toDoForm">
  <input type="text" name="write_todo" placeholder="Write a to do" />
</form>

Answer 1

просто создайте новый стиль, например, как этот

.text-red {
  color: red;
}

.text-blue {
  color: blue;
}

, после этого используйте класс, в котором вы хотите использовать цвет, подобный этому

<form class="js-form form">
  <input type="text" class="text-red" name="write_name" placeholder="What is your name?" />
</form>

<form class="js-toDoForm">
  <input type="text" class="text-blue" name="write_todo" placeholder="Write a to do" />
</form>

Answer 2

Вы можете просто добавить имя класса следующим образом:

<form class="js-form form">
  <input class="firstinput" type="text" name="write_name" placeholder="What is your name?" />
</form>

<form class="js-toDoForm">
  <input class="secondinput" type="text" name="write_todo" placeholder="Write a to do" />
</form>

и css вот так:

    .firstinput {
       //write your styles
     }

    .secondinput {
       //write your styles
     }

Надеюсь, это помогло вам :) IG: @ lindenkoppejan

Answer 3

.js-form input {
  //write your styles

 }

.js-toDoForm input {
//write your styles
}

<!-- OR -->

<form class="js-form form"><input class="input_one" type="text" name="write_name" placeholder="What is your name?" /></form>

<form class="js-toDoForm"><input class="input_two" type="text" name="write_todo" placeholder="Write a to do" /></form>

<!-- And write your styles -->

.input_one {
//write your styles
  color: red;
}

.input_two {
//write your styles
   color: blue;
 }