css - 有没有办法使用 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>