Inputのplaceholderスタイルの変更

Inputは行内のブロック要素で、一般的なスタイルは次のとおりです.

outline-style: none ;  /*          （    ）  */
border-style: none;  /*      （    ）*/

それ以外に、プロジェクトはinputのplaceholderの色を変更する需要がよくあります.ここでplaceholderがcssでどのように設定するかを見てみましょう.
まずchromeのデフォルトのinputスタイルを見てみましょう.

placeholderとinputのデフォルトの色は少し異なることがわかります.inputの色を変更します.

colorの属性は入力値の色しか変えられず、placeholderの色は誰も変わっていないことがわかります.so,placeholderの色をどのように変えるか.placeholderの色を変更するには、擬似クラス::placeholdeに使用します.

::palceholderの擬似クラスの互換性に注意してください.以上はchromeブラウザでの実行結果です.

IEソリューション：

まずIE 9以下ではplaceholderはサポートされていません.IE 10は:-ms-input-placeholderを用いる必要があり、属性は!importantを加えて優先度を高める必要がある.

その後、他のブラウザの適切なスキームを示します.

/* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile >12
   - Android Browser 2.1-4.4.4
   - Samsung Internet
   - UC Browser for Android
   - QQ Browser */
::-webkit-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 4-18 */
:-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 19-50 */
::-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
    color: #ccc !important;
    font-weight: 400 !important;
}

/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* CSS Working Draft */
::placeholder {
    color: #ccc;
    font-weight: 400;
}