HTML5 input placeholder 颜色修改示例

下面是关于“HTML5 input placeholder 颜色修改示例”的完整攻略：

标题

HTML5 input placeholder 颜色修改示例

介绍

HTML5提供了 placeholder 属性，用来在输入框中显示占位符文本，让用户更好地了解该输入框的用途。但默认情况下， placeholder 的颜色是灰色的，在某些场景下不够美观，需要对其进行颜色修改。下面是通过 CSS 修改 placeholder 颜色的方案：

步骤

第一步：选择要修改的 input 元素

input::-webkit-input-placeholder { /* Chrome */
  color: red;
}

input:-ms-input-placeholder { /* IE 10+ */
  color: red;
}

input::-moz-placeholder { /* Firefox 19+ */
  color: red;
}

input:-moz-placeholder { /* Firefox 4 - 18 */
  color: red;
}

示例1：

<input type="text" placeholder="请输入用户名">

上述代码通过选择 input 元素，并修改其 ::-webkit-input-placeholder、:-ms-input-placeholder、::-moz-placeholder、:-moz-placeholder 伪元素的 color 属性，实现了修改 placeholder 颜色的效果。

示例2：

<form>
  <input type="text" name="username" placeholder="请输入用户名">
  <br>
  <input type="password" name="password" placeholder="请输入密码">
  <br>
  <input type="submit" value="登录">
</form>

上述代码通过在 form 表单中放置多个 input 元素，实现了同时修改多个 input 元素 placeholder 颜色的效果。

结论

通过上述代码，我们可以很容易地实现修改输入框 placeholder 颜色的效果，大大提升了用户体验。