使用CSS更改HTML输入框的占位符颜色

技术背景

在网页设计中，我们经常需要对输入框的占位符（placeholder）进行样式定制，其中更改占位符颜色是一个常见需求。从2017年4月起，大多数现代浏览器都支持简单的伪元素 ::placeholder 来实现这一功能，但不同浏览器在实现上存在差异。

实现步骤

1. 了解不同浏览器的实现方式

不同浏览器对占位符样式的支持方式分为伪元素、伪类和不支持三种情况：

• WebKit、Blink（Safari、Google Chrome、Opera 15+）和Microsoft Edge使用伪元素 ::-webkit-input-placeholder。
• Mozilla Firefox 4到18使用伪类 :-moz-placeholder（单冒号）。
• Mozilla Firefox 19+使用伪元素 ::-moz-placeholder，旧的选择器仍会在一段时间内有效。
• Internet Explorer 10和11使用伪类 :-ms-input-placeholder。
• Internet Explorer 9及更低版本完全不支持 placeholder 属性，Opera 12及更低版本不支持任何用于占位符的CSS选择器。

2. 编写CSS代码

由于用户代理需要忽略包含未知选择器的规则，所以我们需要为每个浏览器编写单独的规则。以下是一个示例代码：

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}

3. HTML示例

<input placeholder="Stack Snippets are awesome!">

核心代码

通用代码

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

Sass代码示例

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}

最佳实践

• 避免对比度问题：Firefox的占位符默认有降低的不透明度，因此需要使用 opacity: 1 来确保颜色显示正常。
• 合理设置输入框大小：占位符文本如果过长会被截断，建议使用 em 为单位设置输入框大小，并在大字体设置下进行测试。同时要考虑不同语言的文本长度差异。
• 测试浏览器兼容性：测试支持 placeholder 属性但不支持相关CSS的浏览器（如Opera）。
• 不要用占位符替代标签：确保每个输入框都有对应的标签。
• 处理浏览器默认样式：部分浏览器会对某些 input 类型（如 email、search）使用额外的默认CSS，可能会影响渲染效果。可以使用 -webkit-appearance 和 -moz-appearance 属性进行修改。

常见问题

• CSS规则分组问题：不要将不同浏览器的选择器规则分组，因为一个无效的选择器会使整个组无效。
• Firefox透明度问题：Firefox 19+ 会为占位符设置一个不透明度值，需要手动覆盖 opacity 为1。
• Bootstrap特异性问题：如果使用 Bootstrap 的 form-control 类，可能会存在CSS特异性问题，需要提高选择器的优先级。例如：

.form-control::-webkit-input-placeholder {
    color: red;
}
/* ... and other browsers */