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

Question

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

密码文字样式为;

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

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

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

我该怎么办？

Answer 1

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

<强> HTML

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

JS（使用jQuery）

$('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();});
});

<强> CSS

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

Answer 2

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

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

您必须将类与伪元素

组合在一起

input::-webkit-input-placeholder {    color:#cfcfcf;font-size: 14px; }
input::-moz-placeholder {    color:#cfcfcf;font-size: 14px;}
input:-ms-input-placeholder {    color:#cfcfcf;font-size: 14px; }
input:-moz-placeholder {    color:#cfcfcf;font-size: 14px; }

input.pass::-webkit-input-placeholder { color:#959595;font-size: 16px; }
input.pass::-moz-placeholder { color:#959595;font-size: 16px;; }
input.pass:-ms-input-placeholder { color:#959595;font-size: 16px; }
input.pass:-moz-placeholder { color:#959595;font-size: 16px; }