HTML5 자리 표시 자 텍스트의 텍스트 그림자

Question

입력란의 자리 표시 자 텍스트에 text-shadow을 어떻게 적용 할 수 있습니까? 이 HTML에 ...

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

:

<input type="text" placeholder="placeholder text"/> 

가 ... 다음 color 및 font가 text-shadow 적용되지 않지만 나는이 CSS를 적용

.

jsFiddle example을 참조하십시오.

Answer 1

그림자가 Firefox에서는 작동하지만 Chrome, Safari 또는 Opera에서는 작동하지 않는 것 같습니다. IE8은 자리 표시자를 전혀 렌더링하지 않습니다.

당신은 더 나은 지원 HTML5로 모든 브라우저에서 몇 년을 기다릴 수, 또는 당신이이 같은 자바 스크립트에서 뭔가를 시도 할 수 있습니다 : (. 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'); 
      } 
     } 
    }); 
}