单个占位符中是否可以有多种文本颜色？

Question

我想要一个有多种颜色文字的占位符。可以吗 请帮帮我。

我有一个输入文本，其中占位符显示我是个好孩子。 我想要颜色不同的好词。

Answer 1

否，无法为默认占位符着色，但您可以创建类似于占位符的元素。因此，您可以为字母着色。这是默认占位符的解决方法。

注意我用的是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;
}

    <div class="input-field">
        <input id="input-text-field" type="text"></input>
        <label for="input-text-field"> 
            <span class="first-letter">H</span>  
            <span class="second-letter">E</span>
            <span class="third-letter">L</span>
            <span class="fourth-letter">L</span>
            <span class="fifth-letter">O</span>
        </label>
    </div>

Working Fiddle

---

更新：

仅 CSS（:placeholder-shown）

上面的小提琴有一个错误，即当您在文本框中输入内容并单击外部时，占位符在输入的文本上方再次可见。

所以，为了让它更完美，我们可以使用:placeholder-shown，它除了chrome和firefox之外还没有太多支持。

代码如下：

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

<div class="input-field">
  <input id="input-text-field" type="text" placeholder=" "></input>
  <label for="input-text-field">
    <span class="first-letter">H</span>
    <span class="second-letter">E</span>
    <span class="third-letter">L</span>
    <span class="fourth-letter">L</span>
    <span class="fifth-letter">O</span>
  </label>
</div>

Working Fiddle

使用 JS（没有: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;
}

<div class="input-field">
  <input id="input-text-field" type="text"></input>
  <label for="input-text-field">
    <span class="first-letter">H</span>
    <span class="second-letter">E</span>
    <span class="third-letter">L</span>
    <span class="fourth-letter">L</span>
    <span class="fifth-letter">O</span>
  </label>
</div>

Working Fiddle

Answer 2

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

<form>
<label><input type="text" required placeholder="show me colors"/></label>
</form>

另一个仍在使用图像背景和渐变的示例：http://codepen.io/gc-nomade/pen/WwgzVv