css sets placeholder color

The placeholder in CSS refers to the prompt text displayed in the text input box. The placeholder can set the font, color, size and other styles to let the user know more clearly what content should be entered. Here's how to set the color of the placeholder.

In CSS, setting the color of the placeholder can be achieved through the pseudo element ::placeholder. This pseudo-element allows us to set different styles for the placeholder, including color, font, size, etc. The following is a CSS sample:

/* 设置placeholder字体颜色为灰色 */
::placeholder {
  color: #999;
}

In the above example, we use the ::placeholder pseudo-element to set the placeholder color to gray. Of course, the colors here can be customized according to needs, and can be hexadecimal values, RGB values, or English words, etc.

It should be noted that different browsers have different levels of support for the ::placeholder pseudo-element. For example, the old version of IE browser does not support this pseudo element, and Firefox browser needs to add the :-moz-placeholder prefix to achieve the same effect. Therefore, when using the ::placeholder pseudo-element, it is recommended to test each browser to ensure that it works properly.

In addition to setting the color of the placeholder, we can also set the size, font, style, etc. of the placeholder through the ::placeholder pseudo-element. The following is a more complete example:

/* 设置placeholder样式 */
input[type="text"]::placeholder {
  font-size: 16px; /* 字体大小 */
  font-family: 'Arial', sans-serif; /* 字体 */
  font-style: italic; /* 字体样式 */
  color: #666; /* 字体颜色 */
}

In the above example, we select all input boxes on the page through the input[type="text"]::placeholder selector placeholder in and set its size, font, style, etc.

To sum up, setting the color of placeholder in CSS is very simple. You only need to use the ::placeholder pseudo-element to achieve it. Of course, when using it specifically, you also need to consider the support of each browser for this pseudo-element to ensure that it can work properly.

The above is the detailed content of css sets placeholder color. For more information, please follow other related articles on the PHP Chinese website!