文字阴影

Question

我如何应用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。

参见jsFiddle example。

Answer 1

它看起来像影子工作在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'); 
      } 
     } 
    }); 
}