css如何设置html5 input placeholder 文本的颜色

时间:2017-10-24
html5中，input的placeholder属性规定可描述输入字段预期值的简短的提示信息，那么我们如何通过css改变placeholder文字的颜色呢？其实和简单，直接使用css 的-webkit-input-placeholder设置其颜色即可。

不同的浏览器，对input-placeholder的支持不同。

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

实例：

<style>
    ::-webkit-input-placeholder { 
        color:red; 
     }
    ::-moz-placeholder { 
        color:red; 
    } /* firefox 22+ */
    :-ms-input-placeholder { 
        color:red; 
    } /* ie10,11 */
    input:-moz-placeholder { 
        color:red; 
    }
 </style>
<input type="text" placeholder="Value">

在线运行

随机文章
WEB前端知识点必读
最近更新