獨立樣式佔位符

Question

有沒有一種方法可以在input元素中設置佔位符的樣式，而與用戶輸入內容時顯示的文本無關？例如，我想用text-align: right設置input元素的樣式，但讓佔位符文本顯示爲text-align: center。

Answer 1

是的，但似乎現在需要使用供應商前綴。

input { 
 
    text-align: right; 
 
} 
 

 
::-webkit-input-placeholder { 
 
    text-align: center; 
 
} 
 

 
:-moz-placeholder { /* Firefox 18- */ 
 
    text-align: center; 
 
} 
 

 
::-moz-placeholder { /* Firefox 19+ */ 
 
    text-align: center; 
 
} 
 

 
:-ms-input-placeholder { 
 
    text-align: center; 
 
}

<form> 
 
    <fieldset> 
 
    <label> 
 
     Name 
 
     <input type="text" placeholder="John Doe"> 
 
    </label> 
 
    <input type="submit"> 
 
    </fieldset> 
 
</form>

來源：http://css-tricks.com/snippets/css/style-placeholder-text/