Изменить цвет текста из элемента ввода при вводе (CSS)

Question

У меня есть окно поиска, и я хочу, чтобы цвет текста был белым.Я изменил цвет заполнителя на белый, а цвет текста на белый, но цвет текста становится белым только тогда, когда человек щелкает по форме (при наборе текста он остается серым цветом начальной загрузки).

Как изменитьЭто?Мой style.scss код:

.form-control {
  background-color: transparent !important;
  color: white;

  &::placeholder {
    color: white;
    opacity: 1;
  }
}

Answer 1

Я думаю, что ваши стили где-то переопределены.Пожалуйста, посмотрите на рабочий пример из моей скрипки: https://jsfiddle.net/zmpLru0x/1/

<input class="form-control" placeholder="Example placeholder" type='text'>

.form-control {
  background-color: transparent !important;
  color: green;

  &::placeholder {
    color: red;
    opacity: 1;
  }
}

В приведенном выше примере вы можете легко контролировать цвет заполнителя, используя метод, который вы предоставили.При изменении цвета на белый также заполнитель и текст будут белым.

Answer 2

Для вашей проблемы focus псевдокласс должен работать:

#searchFieldText:focus {  // set your searchbox with focus pseudo class
    color: #fff; // put your color here
}

Дайте мне знать, если это работает.