键入（css）时从输入元素更改文本颜色

Question

我有一个搜索框，我希望文本的颜色为白色。 我将占位符颜色更改为白色，将文本颜色更改为白色，但是当该人从表单中单击时，文本颜色仅变为白色（在键入时仍为灰色的Bootstrap颜色）。

如何更改它？我的style.scss代码：

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

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

Answer 1

针对您的问题focus 伪类应该起作用：

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

让我知道这是否可行。

Answer 2

我认为您的样式在某处被覆盖。请看我的小提琴的工作示例： 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;
  }
}

在上面的示例中，您可以使用提供的方法轻松控制占位符颜色。当您将颜色更改为白色时，占位符和文本也将变为白色。