如何在输入占位符中为主文本和子文本应用不同的样式?
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;
【讨论】:
以上是关于如何在输入占位符中为主文本和子文本应用不同的样式?的主要内容,如果未能解决你的问题,请参考以下文章