文字陰影

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'); 
      } 
     } 
    }); 
}