单个占位符中是否可能有多种文本颜色？
我想要一个带有多种颜色文本的占位符。请帮助我。
我有一个输入文本，占位符显示我是个好孩子。 我希望颜色不同的好词。
不可以 ，无法为默认占位符着色，但您可以创建类似于占位符的元素。 所以，你可以给字母上色。 这是默认占位符的变通方法。
请注意，我使用的是opacity: 0.5 ，您可以根据需要进行更改。
HTML
.input-field { position: relative; display: inline-block; } .input-field > label { position: absolute; left: 0.5em; top: 50%; margin-top: -0.5em; opacity: 0.5; } .input-field > input[type=text]:focus + label { display: none; } .input-field > label > span { letter-spacing: -2px; } .first-letter { color: red; } .second-letter { color: blue; } .third-letter { color: orange; } .fourth-letter { color: green; } .fifth-letter { color: yellow; }
CSS可以帮助你（不是IE）。 mix-blend-mode + gradient和background调度在2个容器中。
我使用required （属性）和:invalid （CSS）仅在显示placeholder时触发效果。
有关信息，请查看：
示例（适用于处理mix-blend-mode浏览器）
input { font-family:monospace; vertical-align:middle; font-size:2em; } input:invalid { mix-blend-mode:screen; text-shadow:0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black; /* increase visibility */ } label { background:repeating-linear-gradient(to right, pink 10%, blue 10%, blue 20%, purple 20%, purple 30%, red 30%, red 40%, green 40%, green 50%, turquoise 50%, turquoise 60%) left ; background-size: 10em 400px; }