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

Posted

技术标签:

【中文标题】如何在输入占位符中为主文本和子文本应用不同的样式?【英文标题】: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; 

【讨论】:

以上是关于如何在输入占位符中为主文本和子文本应用不同的样式?的主要内容,如果未能解决你的问题,请参考以下文章

POWERPOINT中,在幻灯片的占位符中添加的文本有啥要求

如何对占位符应用不同的颜色并输入文本框值?

单击指定单元格后,在搜索栏占位符中获取表格视图单元格文本值

如何使用空占位符文本

如何在 Rails 3 的占位符中使用 <br />?

如何更新 ng2-smart-table 中的占位符文本?