修改input元素placeholder樣式的方法

我們時常需要跟input輸入框打交道，很多情況下都要對placeholder的內容進行修改，例子：

{/* React的寫法 */}
<input type="text" placeholder={'placeholder'}/>

默認情況下的顯示如下：

我們是沒法直接對input元素設置樣式來更改placeholder，需要通過僞元素 ::-webkit-input-placeholder 的方式來修改樣式：

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

顯示的效果：

這裏補充一下針對不同瀏覽器的用法：

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