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

【问题标题】：How can I apply different style for main and sub text in input placeholder?如何在输入占位符中为主文本和子文本应用不同的样式？
【发布时间】：2015-01-18 06:38:49
【问题描述】：

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

密码文本样式为;

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

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

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

我该怎么办？

【问题讨论】：

Styling the placeholder of an input, how can I do this?的可能重复
placeholder 不能拆分，因为它是一个属性而不是一个元素......至少 AFAIK
How can I make a split-text input placeholder?的可能重复
@TomaszKowalczyk 我的问题不同，请再读一遍。我想对每个文本块应用不同的样式
唯一的方法是使用contenteditable 元素而不是<input>。

标签： html css input placeholder

【解决方案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;
}

【讨论】：

【解决方案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; }

【讨论】：