使用VS Code Live Server与Chrome时，文本框无法修改文字颜色？

你遇到的问题核心在于：你设置的color: blue是用来控制用户输入的文字颜色，但当前输入框显示的是**占位符（placeholder）**文本，这部分的样式需要通过::placeholder伪元素单独定义。

Chrome等现代浏览器会给输入框的占位符设置默认文字样式，直接给input元素设置color并不会覆盖占位符的默认颜色——这就是为什么你能看到背景色、字体生效，唯独占位符文字颜色没变化的原因。

修正后的CSS代码 #

#search-box {
    font-family: Arial;
    font-size: 16px;
    background-color: red;
    /* 控制用户输入的文字颜色 */
    color: blue;
}

/* 专门设置占位符的文字颜色 */
#search-box::placeholder {
    color: blue;
}

你可以测试下：在输入框中输入内容，会发现输入的文字已经是蓝色了；加上::placeholder样式后，占位符文字也会变成蓝色。

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