You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

CSS网页开发中,如何修改输入框输入文本颜色?

修改输入框输入文本颜色的解决方案

你之前调整placeholder的方法没用,是因为placeholder管的是输入框为空时的提示文字,而输入后的文本颜色是由CSS的color属性控制的,直接给输入框加以下样式就行:

  • 全局设置所有输入框:
input {
  color: #ffffff; /* 白色文本,适配深色背景 */
  caret-color: #ffffff; /* 把光标也改成白色,视觉更统一 */
}
  • 只针对特定输入框(比如你的搜索框有类名netflix-search):
.netflix-search {
  color: #ffffff;
  caret-color: #ffffff;
}
  • 聚焦状态下的样式(避免浏览器默认样式覆盖):
    如果输入框聚焦后颜色又变回去,可以加这个:
input:focus {
  color: #ffffff;
  /* 可选:去掉默认的聚焦边框,换成Netflix风格的红色边框 */
  outline: none;
  border-color: #e50914;
}

核心就是区分开“输入提示文字”和“实际输入文本”的样式控制,前者用::placeholder伪元素,后者直接用color属性。

内容的提问来源于stack exchange,提问作者Protyush Ghosh

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.26 15:47:15