Home > Article > Web Front-end > How to modify the color of placeholder with CSS

How to modify the color of placeholder with CSS

醉折花枝作酒筹Original: 2021-04-13 10:43:1234482browse

Method: First use the "::placeholder" selector to select the element that needs to be modified; then add the "color:color value;" style to the element. Note that placeholder is a new selector in CSS3 and requires different prefixes ("-ms-", "-webkit-", etc.) in different browsers.

The operating environment of this tutorial: Windows7 system, CSS3&&HTML5 version, Dell G3 computer.

The placeholder attribute is a new attribute in HTML5. Its function is to describe the prompt information of the expected value of the input field.

How to modify the color of the placeholder?

But there are certain problems Browser compatibility issues, taking chorme as an example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    
    input::-webkit-input-placeholder {
        color: #aab2bd;
        font-size: 12px;
    }
    input {//边框效果
        border: 1px solid red;
    }
    </style>
</head>
<body>
    
    <input type="text" placeholder="请输入">
    
</body>
</html>

The selector corresponding to the chorme browser is input::-webkit-input-placeholder

The effect is as follows:

The selectors for other browsers are as follows:

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

WebKit, Blink, Edge browsers, etc. need to bring the -webkit- prefix, and it is Double colon, you should also write it with input
. For Firefox browser, there are two ways to write it, both of which need to be prefixed with -moz-. Lower versions of Firefox use colons (:), while higher versions use double colons (::); Firefox does not require input.
The placeholder attribute is only supported in IE10. IE10 and IE11 are written with -ms- prefix, using a colon (:), and need to bring input

Recommended learning : css video tutorial

The above is the detailed content of How to modify the color of placeholder with CSS. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 webkit edge 选择器 input

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to achieve flip effect in csNext article：How to achieve flip effect in cs

See more

How to modify the color of placeholder with CSS

Related articles