独立设计占位符

【问题标题】：Styling placeholder independently独立设计占位符
【发布时间】：2014-07-28 09:09:10
【问题描述】：

有没有办法在input 元素中设置占位符的样式，而与用户输入内容时出现的文本无关？例如，我想用text-align: right 设置input 元素的样式，但让占位符文本显示为text-align: center。

【问题讨论】：

【解决方案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/

【讨论】：