Question

使用VS Code Live Server扩展和Chrome。出于某种原因，我可以更改文本框的所有其他属性，但不能更改文本颜色——为什么？

文本框.html：

<!DOCTYPE html>
<html>
    <head>
        <title>Search Google</title>
        <link rel="stylesheet" href="textbox.css">
    </head>
    <body>
        <input id="search-box" type="text" placeholder="Search Google or type a URL">
    </body>
</html>

文本框.css：

#search-box {
    font-family: Arial;
    font-size: 16px;
    background-color: red;
    color: blue;
}

Answer 1

color属性仅为用户在表单字段中键入的文本设置样式。要为占位符文本上色，需要使用：占位符伪元素：

#search-box {
  font-family: Arial;
  font-size: 16px;
  background-color: red;
  color: blue;
}

::placeholder {
  color: blue;
}

<input id="search-box" type="text" placeholder="Search Google or type a URL">

Answer 2

您只能更改输入文本的颜色，但不能更改占位符文本的颜色。如果要设置占位符文本的颜色，可以执行以下操作：

#search-box::placeholder {
     color: blue;
}

友情链接