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
相关产品推荐
相关产品推荐

