我想要一个多色文本的占位符,有可能吗 请帮助我。
我有一个输入文本,其中占位符显示我是一个好 child 。 我想要不同颜色的好词。
最佳答案
否,无法为默认占位符着色,但您可以创建类似于占位符的元素。所以,你可以给字母上色。这是默认占位符的解决方法。
请注意,我使用的是 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
)
上面的 fiddle 有一个错误,当您在文本框中键入内容并在外部单击时,占位符会再次显示在输入文本的上方。
所以,为了让它更完美,我们可以使用 :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>
使用 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>
关于javascript - 单个占位符中是否可能有多种文本颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25907031/