AtoZ CSS快速提示：占位符文本

This article is a part of our AtoZ CSS Series. You can find other entries to the series here. You can view the full transcript and screencast for its corresponding video, Pseudo Elements, here.

本文是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。 您可以在此处查看其相应视频Pseudo Elements的完整成绩单和截屏视频。

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, we’ve added a new quick tip about styling placeholder text.

欢迎来到我们的AtoZ CSS系列！ 在本系列中，我将探索不同CSS值(和属性)，每个均以不同的字母开头。 我们知道有时截屏视频还不够，因此在本文中，我们添加了有关设置占位符文本样式的新提示。

P用于占位符文本 (P is for Placeholder Text)

Pseudo elements :before and :after are great for building complex design features without cluttering the markup with non-semantic elements. Other pseudo elements like :first-line and :first-letter give us access to styling parts of elements that aren’t found marked up in the HTML document.

伪元素:before和:after非常适合构建复杂的设计功能，而不会因非语义元素而使标记混乱。 其他伪元素，例如:first-line和:first-letter使我们可以访问HTML文档中未标记的元素的样式部分。

We looked at many of these in the Pseudo Elements screencast but one pseudo element we didn’t look at was for styling placeholder text. Let’s fix that.

我们在“ 伪元素”截屏中查看了许多伪元素，但我们没有看到的一个伪元素是用于设置占位符文本的样式。 让我们修复它。

选择输入占位符 (Selecting input placeholders)

First, let’s imagine the following HTML:

首先，让我们想象一下以下HTML：

<input class="name-field" type="text" placeholder="Enter your name">

We could set the color of the input text to red as follows:

我们可以将输入文本的color设置为红色，如下所示：

.name-field {
  color: red;
}

We could also select and style the input from its placeholder attribute:

我们还可以从其占位符属性中选择输入并设置其样式：

input[placeholder="Enter your name"] {
  color: red;
}

But this still styles the text of any user input typed into the field, rather than styling the appearance of the placeholder text itself. To do that we need a series of vendor prefixed selectors for the placeholder pseudo element.

但这仍然可以为键入该字段的任何用户输入的文本设置样式，而不是为占位符文本本身的外观设置样式。 为此，我们需要一系列用于占位符伪元素的供应商前缀选择器。

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

This may appear like duplications but unfortunately there is no DRY-er (Don’t Repeat Yourself) way to do this.

这可能看起来像复制品，但不幸的是，没有DRY-er(不要自己重复)的方法。

The following will not work:

以下内容不起作用：

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: red;  
}

This is because any browser must be able to “understand” each of the selectors in the comma-separated series for the styles within the braces to be applied.

这是因为任何浏览器都必须能够“理解”要用括号括起来的样式的逗号分隔系列中的每个选择器。

使用Sass设置占位符的样式 (Use Sass to style placeholders)

One solution to this repetitive CSS is to use a Sass mixin. This is the one that I use in 99% of my projects:

此重复CSS的一种解决方案是使用Sass mixin。 这是我在99％的项目中使用的一个：

@mixin input-placeholder {
  ::-webkit-input-placeholder {
    @content;
  }
  :-moz-placeholder {/* Firefox 18- */
    @content;
  }
  ::-moz-placeholder {/* Firefox 19+ */
    @content;
  }
  :-ms-input-placeholder {  
    @content;
  }
}

/* usage */

@include input-placeholder {
  color: red;
}

This allows me to set the styles for placeholders in all browsers with a single Sass @include which helps keep the code shorter and more maintainable.

这使我可以使用单个Sass @include设置所有浏览器中占位符的样式，这有助于使代码更短且更易于维护。

设置占位符的样式时，请注意其特殊性 (Be careful of specificity when styling placeholders)

In the IE browser, setting styles on an input can override the styles set for the placeholder text.

在IE浏览器中，在输入上设置样式可以覆盖为占位符文本设置的样式。

:-ms-input-placeholder {
  color: red;
}
input[type="text"] { 
  color: blue; /* placeholder text will be blue in IE */
}

Ensure IE placeholder styles have higher specificity so they appear as expected. This could even be a case for using !important but always be careful if using that powerful tool.

确保IE占位符样式具有更高的特异性，以便它们按预期显示。 使用!important甚至可能是这种情况，但如果使用该功能强大的工具，请务必小心。

注意占位符的opacity性 (Be aware of opacity of placeholders)

In Firefox, placeholder text has a default opacity of around 0.5 so setting color: red on the placeholder will result in a muted color unless you also set opacity: 1.

在Firefox中，占位符文本的默认opacity约为0.5因此在占位符上设置color: red将导致color变暗， unless you also set opacity: 1 。

Even if you’re using Normalize.css this isn’t reset for you. If fully opaque placeholders are key to your project, keep this tip in mind!

即使您使用Normalize.css，也不会为您重置。 如果完全不透明的占位符是您项目的关键，请记住这一提示！

翻译自: https://www.sitepoint.com/atoz-css-placeholder-text/