html - 更改部分文本占位符颜色

Question

我有一个文本“占位符”，等于“新密码(留空以保持不变)”。我只希望括号中的部分改变颜色，这意味着“新密码”将保持红色，括号中的句子在这种情况下将变为蓝色。

有什么帮助吗？

代码:

<input type="password" class="input-text" name="password_1" id="password_1" placeholder="New Password (leave blank to leave unchanged)">

CSS:(这确实改变了整个占位符文本句子)

input[type="text" i].form-row::-webkit-input-placeholder {
    color: #757575;
}

因此作为最终答案，占位符="新密码(保留空白以保持不变)"部分将更改为 =

新密码 - 颜色:红色；

(留空保持不变)-颜色:蓝色；

Answer 1

我找到了可以为您解决问题的 fiddle 。它确实需要您更改设置占位符的方式，因为目前还没有办法为占位符属性的部分部分着色。

您基本上要做的是创建一个占位符的效果，而不是它实际上是一个。

.placeholder-wrap input:focus + .placeholder {
    display: none;
}

上面的部分将帮助您在用户单击输入字段时使“占位符”消失。

<div class="placeholder-wrap">
    <input type="text" name="userName" />
    <span class="placeholder">
        This is a <b class="important">placeholder</b> long text goes here
    </span>
</div>

http://jsfiddle.net/dfsq/xD5Lq/