2011-09-05 173 views
2

我如何應用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"/> 

...那麼colorfont應用而不是text-shadow

參見jsFiddle example

+0

它在Firefox中顯示給我。 – Drew

+0

我可以在你的jfiddle例子中看到一個陰影。你有沒有嘗試過所有的網頁瀏覽器?因爲佔位符文本是新的,我敢打賭,有些瀏覽器不支持其他高級功能。 – Oliver

+0

哦,好吧,我正在嘗試Chrome 13 –

回答

2

它看起來像影子工作在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感謝您的信息!這有助於。 –