我正在尝试使用超棒的字体图标作为搜索输入字段中的占位符。
我使用相应的html实体作为占位符,然后使用伪类对具有正确字体家族的占位符进行样式设置(jsfiddle中的示例2):
HTML:
<div class="wrapper">
<input class="icon" type="text" placeholder="" />
</div>
CSS:
.wrapper {
font-family:'arial', sans-serif;
}
input.icon {
padding:5px;
}
input.icon::-webkit-input-placeholder {
font-family:'FontAwesome';
}
input.icon::-moz-placeholder {
font-family:'FontAwesome';
}
input.icon::-ms-input-placeholder {
font-family:'FontAwesome';
}
它按预期工作。
当我尝试通过jquery添加输入类和占位符时,问题就开始了(jsfiddle中的示例1):
JS:
$(document).ready(function() {
$('.wrapper input:first').addClass('icon');
$('.wrapper input:first').attr("placeholder", "");
});
它不将字体家族应用于输入占位符,而仅显示实体文本。
我试图把事情混在一起,最后放弃了。请帮忙!
PS:在我的特殊情况下,在CSS中将:before
字体添加content
到输入包装程序的方法无效。
您应该先解析哈希。您可以使用$.parseHTML
:
$('.wrapper input:first').attr("placeholder", $.parseHTML("")[0].data);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句