是否可以使用CSS更改文本框的文本颜色（但仅在编辑时）？

Question

不编辑时，我的文本框为深棕色，文本颜色为白色。编辑时，文本框具有白色背景。麻烦的是，文本颜色保持白色，我需要将其更改为黑色，但仅在编辑时。

（当焦点离开文本框时，我希望文本颜色恢复为白色，因为文本框的背景将恢复为深棕色）

.wpcf7-form textarea {
    height: 130px;
    min-height: 68px;
    color: black;  /* this doesn't work; color remains black after editing is complete */   
}

Answer 1

您需要使用CSS伪类:focus

.wpcf7-form textarea {
  /** Default Styling **/
  width: 80%;
  height: 100px;
  color: gray;
  overflow: hidden;
  border: 1px solid lightgray;
  outline: none;
  opacity: .2;
}

.wpcf7-form textarea:focus {
  /** Styling you want while focusing the textarea **/
  color: black;
  opacity: 1;
}

<div class="wpcf7-form">
  <textarea />
</div>

Answer 2

您需要使用伪类：focus。

来自CSS tricks

  

CSS中的：focus伪类用于设置元素的样式   当前由键盘定位或由鼠标激活。

.wpcf7-form textarea:focus {
       height: 130px;
       min-height: 68px;
       color: #fff;
    }