可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I want a placeholder with multiple color text.Is it possible please help me.

I have a input text filed where placeholder showing I'm a good boy. I want good word different in color.

回答1:

No, it is not possible to color the default placeholder but you can create a element similar to placeholder. So, that you can color the letters. This is a workaround to the default placeholder.

Note that I am using opacity: 0.5, you can change it as per your need.

~~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; }

                           H               E             L             L             O

~~Working Fiddle~~

Updated:

Only CSS (with `:placeholder-shown`)

The above fiddle has a bug which is when you type something in the textbox and click outside, the placeholder is visible again above the entered text.

So, to make it perfect, we can use :placeholder-shown which hasn't have much support yet other than chrome and firefox.

Here is the code:

.input-field {   position: relative;   display: inline-block; }  .input-field > label {   position: absolute;   left: 0.5em;   top: 50%;   margin-top: -0.5em;   opacity: 0.5;   display: none; }  .input-field > input[type=text]:placeholder-shown + label {   display: block; }  .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; }

        H     E     L     L     O

Working Fiddle

Using JS (without `:placeholder-shown`):

addListenerMulti(document.getElementById('input-text-field'), 'focus keyup', blurme);  function blurme(e) {   var element = e.currentTarget;   element.classList[(element.value.length !== 0) ? "add" : "remove"]('hide-placeholder'); }  function addListenerMulti(el, s, fn) {   s.split(" ").forEach(function(e) {     return el.addEventListener(e, fn, false)   }); }

.input-field {   position: relative;   display: inline-block; } .input-field > label {   position: absolute;   left: 0.5em;   top: 50%;   margin-top: -0.5em;   opacity: 0.5; } .hide-placeholder + 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; }

        H     E     L     L     O

Working Fiddle

回答2:

CSS could help you (not IE yet). mix-blend-mode + gradient and background dispatch in 2 containers.

i used required (attribute) and :invalid (CSS) to trigger effect only when placeholder is shown.

For info , take a look at :

Example (for browser that deals with 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; }