Modification method input element placeholder style

We often need to follow inputto deal with input boxes, in many cases to be placeholdercontent to be modified, example:

{/* React的写法 */}
<input type="text" placeholder={'placeholder'}/>
复制代码

The default display is as follows:

We are unable to directly input element set style to change the placeholder, required by pseudo-elements ::-webkit-input-placeholder to modify the style of the way:

::-webkit-input-placeholder {
    color: red;
    font-size: 20px;
    font-weight: bolder;
}
复制代码

Show results:

Here add usage for different browsers:

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: red;
    font-size: 20px;
    font-weight: bolder;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: red;
    font-size: 20px;
    font-weight: bolder;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: red;
    font-size: 20px;
    font-weight: bolder;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: red;
    font-size: 20px;
    font-weight: bolder;
}
复制代码

Reproduced in: https: //juejin.im/post/5d03955a6fb9a07eae2a5ab8