文字阴影
问题描述:
我如何应用text-shadow
我的输入字段的占位符文本?文字阴影
当我将此CSS:
input[type='text']::-webkit-input-placeholder {
color: green;
font: 18px Arial;
text-shadow: 2px 2px 2px #000000;
}
input[type='text']:-moz-placeholder {
color: green;
font: 18px Arial;
text-shadow: 2px 2px 2px #000000;
}
...这个HTML:
<input type="text" placeholder="placeholder text"/>
...那么color
和font
应用而不是text-shadow
。
答
它看起来像影子工作在Firefox,而不是在Chrome,Safari浏览器和Opera。 IE8根本不渲染占位符。
你可以等到所有的浏览器几年,以更好地支持HTML5,或者你可以尝试在JavaScript是这样的:(Mootools的代码,但它并不难实现的jQuery或任何类似的东西)
/* focus/blur for Element */
function applyToggleElement(item, msg) {
var itm = item;
if (typeof (item) == 'string')
itm = $$(item);
if (itm.value.trim().length == 0) {
itm.value = msg;
itm.addClass('placeholder');
}
itm['msg'] = msg;
itm.addEvents({
'focus': function() {
if (this.value == this.msg) {
this.value = '';
this.removeClass('placeholder');
}
},
'blur': function() {
if (this.value.trim().length === 0) {
this.value = this.msg;
this.addClass('placeholder');
}
}
});
}
+0
+1感谢您的信息!这有助于。 –
它在Firefox中显示给我。 – Drew
我可以在你的jfiddle例子中看到一个阴影。你有没有尝试过所有的网页浏览器?因为占位符文本是新的,我敢打赌,有些浏览器不支持其他高级功能。 – Oliver
哦,好吧,我正在尝试Chrome 13 –