CSS占位符颜色

占位符，通常一个输入内部的变灰的文本元素，设计起来比较痛苦。幸运的是，我们已经发现了一个简短但有效的CSS解决方案来根据您希望的任何颜色和透明度来设计输入的占位符文本。继续来看代码。

改变占位符文字颜色

让我们从一个简单的输入和某个占位符文字开始，在这个例子中我们使用单词'search'，但是您可以使用您希望的任何单词。基本HTML如下：

HTML
<body>
  <input placeholder="Search">
</body>

输入（和文本区域）占位符默认设置为浅灰色，但是我们可以通过几行CSS改变这个颜色。我们这里使用HTML颜色名称将输入文本颜色设为红色，但任何颜色方法都可以实现（Hex、RGB、HSL）。

CSS
::-webkit-input-placeholder { /* Chrome */
  color: red;
}
:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
::-moz-placeholder { /* Firefox 19+ */
  color: red;
  opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: red;
  opacity: 1;
}

演示的CodePen

请注意，很重要的一点是要将不同供应商前缀包括进去，以尽可能多地支持不同浏览器。只有火狐浏览器（Firefox）的占位符文字默认设置为轻微透明，所以针对IE 或Chrome 浏览器无需设置不透明属性。

改变占位符焦点文字颜色

好了，我们已经成功将占位符文字颜色改为红色，但是如果用户在我们的输入区域内点击时发生点什么就好了。使用同样的供应商前缀CSS属性，我们可以改变输入占位符文字焦点的不透明度。

CSS
input {
  outline: none;
  padding: 12px;
  border-radius: 3px;
  border: 1px solid black;
}
::-webkit-input-placeholder { /* Chrome */
  color: red;
  transition: opacity 250ms ease-in-out;
}
:focus::-webkit-input-placeholder {
  opacity: 0.5;
}
:-ms-input-placeholder { /* IE 10+ */
  color: red;
  transition: opacity 250ms ease-in-out;
}
:focus:-ms-input-placeholder {
  opacity: 0.5;
}
::-moz-placeholder { /* Firefox 19+ */
  color: red;
  opacity: 1;
  transition: opacity 250ms ease-in-out;
}
:focus::-moz-placeholder {
  opacity: 0.5;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: red;
  opacity: 1;
  transition: opacity 250ms ease-in-out;
}
:focus:-moz-placeholder {
  opacity: 0.5;
}

演示的CodePen

在上面示例中，我们已经对输入本身加入了一些基础设计，并添加了不透明度转换使用户体验更佳。查看样本并使用其他CSS属性和转换尝试一下。