输入：：占位符｛color:red；｝<input-type=“text”placeholder=“value”>

您还可以设置文本区域的样式：

input:：-webkit输入占位符，textarea:：-webkit输入占位符{颜色：#FF9900；}输入：-moz占位符，文本区域：-moz占位符{颜色：#FF9900；}<textarea rows=“4”cols=“50”placeholder=“堆栈代码段很好！”></text区域>

<input type="text" class="input-control" placeholder="My Input">   

在头部添加以下CSS。

<style type="text/css">
    .input-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
                    color: red !important;
                    opacity: 1; /* Firefox */
    }
        
     .input-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
                    color: red !important;
     }
        
     .input-control::-ms-input-placeholder { /* Microsoft Edge */
                    color: red !important;
     }
</style>

以下是参考链接。https://www.w3schools.com/howto/howto_css_placeholder.asp

尝试此css

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ddd;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: #ddd;
}
input:-ms-input-placeholder { /* IE 10+ */
  color: #ddd;
}
input:-moz-placeholder { /* Firefox 18- */
  color: #ddd;
}

CSS提供：：占位符伪元素。

请注意，Bootstrap中的.placeholder mixin已被弃用。

例子：

input::placeholder { color: black; }

当使用autorefixer时，以上代码将被转换为适用于所有浏览器的正确代码。

这会很好的。此处演示：

input:：-webkit输入占位符，textarea:：-webkit输入占位符{颜色：#666；}输入：-moz占位符，文本区域：-moz占位符{颜色：#666；}input:：-moz占位符，文本区域：：-moz占位符{颜色：#666；}input：-ms输入占位符，文本区域：-ms输入占位符{颜色：#666；}<input type=“text”placeholder=“Value”/>