输入框设置灰色背景导致光标不可见的问题求助

问题出在浏览器默认光标颜色与灰色背景的对比度太低，导致光标几乎无法被看见。你可以通过以下两种方式解决：

方法1：直接指定光标颜色 #

使用CSS的caret-color属性设置光标颜色，选择和灰色背景反差明显的颜色（比如白色）即可。注意不要把样式应用到按钮上，避免影响按钮外观：

/* 仅针对文本输入框和文本域，排除按钮 */
input[type="text"], textarea {
  background-color: gray;
  /* 设置光标为白色，与灰色背景形成清晰对比 */
  caret-color: white;
}

方法2：调整文本颜色（光标自动继承） #

如果希望输入框内的文本也更清晰，可以直接修改文本颜色，光标默认会继承文本颜色，同样能解决光标不可见的问题：

input[type="text"], textarea {
  background-color: gray;
  /* 将文本设为白色，光标会自动同步这个颜色 */
  color: white;
}

对应的HTML代码保持不变：

<input type="text" />
<br /><br />
<textarea></textarea>
<br /><br />
<input type="button" value="button" />

设置完成后，光标就能在灰色背景的输入框中清晰显示了。

内容的提问来源于stack exchange，提问作者sim-bir