如何使用CSS仅在文本框编辑状态下修改文字颜色？

Got it, let's sort out this text color issue for your CF7 textarea! The problem with your current code is that you've set a global color: black which doesn't toggle back when the textarea loses focus. We need to use CSS pseudo-classes to switch styles based on whether the field is in focus (being edited) or not.

Here's the correct CSS approach:

/* Default state: when the textarea is NOT being edited */
.wpcf7-form textarea {
  height: 130px;
  min-height: 68px;
  background-color: #3d2b1f; /* Replace with your exact dark brown hex code */
  color: white; /* White text when not focused */
  /* Add any other default styles here (like padding, border) if needed */
}

/* Focus state: when the textarea is being edited */
.wpcf7-form textarea:focus {
  background-color: white; /* White background during editing */
  color: black; /* Black text only while focused */
  /* Optional: Remove default focus outline if you want a custom style */
  /* outline: 2px solid #your-accent-color; */
}

How this works: #

• The first rule targets the textarea in its normal, unfocused state: sets your dark brown background and white text.
• The :focus pseudo-class kicks in only when the user clicks into the textarea to edit it, switching the background to white and text to black.
• As soon as the user clicks outside the textarea (loses focus), the styles revert back to the default rule automatically.

If you still see issues: #

Sometimes other CSS rules from your theme or CF7 itself might override these styles. To fix this, make your selectors more specific. For example, CF7 textareas often have a .wpcf7-textarea class, so you can use:

.wpcf7-form .wpcf7-textarea {
  height: 130px;
  min-height: 68px;
  background-color: #3d2b1f;
  color: white;
}

.wpcf7-form .wpcf7-textarea:focus {
  background-color: white;
  color: black;
}

If all else fails, you can add !important to the color property (use this sparingly, as it can make future style changes harder):

.wpcf7-form .wpcf7-textarea:focus {
  color: black !important;
}

内容的提问来源于stack exchange，提问作者tayo