Html 如何为输入占位符中的主文本和子文本应用不同的样式？

我想为输入占位符中的主文本和子文本应用不同的样式，如下所示

密码文本样式为

{
    color:#959595;
    font-size: 16px;
}

（至少4个字符）我想要的子文本样式

{
    color:#cfcfcf;
    font-size: 14px;
}

---

如何操作？

您可以将类应用于输入元素：

<input type="text" placeholder="subtext"></input>
<input type="text" class="pass" placeholder="password"></input>

首先，检查 您可以通过跨浏览器的方式，通过一些JS工作来实现此效果：

HTML

<input type="text" placeholder="Password" data-placeholder-note="(at least 4 characters)" />

---

无法拆分占位符的可能重复项，因为它是属性而不是元素…至少@TomaszKowalczyk的可能重复项@TomaszKowalczyk我的问题不同，请重新阅读。我想对每个文本块应用不同的样式唯一的方法是使用

contenteditable

元素，而不是

。

<input type="text" placeholder="Password" data-placeholder-note="(at least 4 characters)" />

$('input').each(function(){
    var current = $(this);
    var note = $('<span />').addClass('placeholder')
        .text(current.data('placeholder-note'))
        .insertAfter(this);
    var origPH = current.attr('placeholder');
    current
        .focus(function(){
            current.attr('placeholder', '');
            note.hide();
        }).blur(function(){
            current.attr('placeholder', origPH);
            note.show();
        });
    note.click(function(){current.focus();});
});

input {
    position:relative;
    font-size:18px;
    width:220px;
    padding:4px;
    border-radius:4px;
}
span.placeholder {
    font-size:12px;
    position:relative;
    left:-135px;
    color:#bbb;
}