在单个占位符中可能有多个文本颜色吗？ [英] Is it possible multiple text color in a single placeholder?

问题描述

我有一个输入文字，其中占位符显示我的一个好男孩。
我想要好的词在颜色上不同。

解决方案

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

请注意，我使用 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>标签> span {letter-spacing：-2px;}第一个字母{color：red;}第二个字母{color：blue;}第三个字母{color：orange;}第四个字母{color：green;} .fifth-letter {color：yellow;}  

  div class =input-field> < input id =input-text-fieldtype =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>  

工作小提琴

---

更新时间：

仅限CSS（ ：placeholder-shown ）

上述小提琴有一个错误在文本框中单击外部，占位符在输入的文本上方再次可见。

因此，为了完美，我们可以使用 ：placeholder-shown 没有太多支持。

这是代码：

  .input-field {position：relative; display：inline-block;}。input-field> label {position：absolute; left：0.5em; top：50％; margin-top：-0.5em;不透明度：0.5; display：none;}。input-field> input [type = text]：placeholder-shown + label {display：block;} input-field>标签> span {letter-spacing：-2px;}第一个字母{color：red;}第二个字母{color：blue;}第三个字母{color：orange;}第四个字母{color：green;} .fifth-letter {color：yellow;}  

  div class =input-field> < input id =input-text-fieldtype =textplaceholder =>< / 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>  

工作小提琴

使用JS（不含：placeholder-shown ）：

  addListenerMulti（document.getElementById（'input-text-field'），'focus keyup'，blurme）; function blurme 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 ，false）}）;}  

  .input-field {位置：相对; display：inline-block;}。input-field>标签{position：absolute; left：0.5em; top：50％; margin-top：-0.5em; opacity：0.5;}。hide-placeholder + label {display：none;}。input-field>标签> span {letter-spacing：-2px;}第一个字母{color：red;}第二个字母{color：blue;}第三个字母{color：orange;}第四个字母{color：green;} .fifth-letter {color：yellow;}  

  div class =input-field> < input id =input-text-fieldtype =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>  

工作小提琴

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.

解决方案

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

    <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

---

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

<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

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

<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

这篇关于在单个占位符中可能有多个文本颜色吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！