html - 独立设计占位符

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/