How to modify the color of placeholder with CSS-CSS Tutorial-php.cn

How to modify the color of placeholder with CSS

醉折花枝作酒筹

Release： 2023-01-05 16:07:57

Original

34481 people have browsed it

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.

How to modify the color of placeholder with CSS

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>

Copy after login

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;
}

Copy after login

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!