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

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 ）

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

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

以下是代码：

.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的浏览器）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13; 图像背景和渐变仍处于使用状态的另一个示例：http://codepen.io/gc-nomade/pen/WwgzVv