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

Posted 2023-03-05

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

【英文标题】：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>。

【参考方案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;