关于input输入框placeholder属性的样式问题

　　正常情况下，我们写的input的默认样式是这样的：

　　　　

　　但是开发过程中，我们需要实现的效果是这样的：

　　　　

　　实现方法很简单，我们只需要在style样式里进行如下设置，同时因为适配问题，总体代码如下：　　　　　　　

        input:-ms-input-placeholder{
            color: #7ed5c4;
        }/* Internet Explorer 10+ */
        input::-webkit-input-placeholder{
            color: #7ed5c4;
        }/* WebKit browsers */
        input::-moz-placeholder{
            color: #7ed5c4;
        } /* Mozilla Firefox 19+ */
        input:-moz-placeholder{
            color: #7ed5c4;
        }/* Mozilla Firefox 4 to 18 */

　　同样文本域 textarea 也是一样设置，代码如下：　　　

            input:-ms-input-placeholder,textarea:-ms-input-placeholder {
                color: #7ed5c4;
            }/* Internet Explorer 10+ */
            input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
                color: #7ed5c4;
            }/* WebKit browsers */
            input::-moz-placeholder,textarea::-moz-placeholder {
                color: #7ed5c4;
            } /* Mozilla Firefox 19+ */
            input:-moz-placeholder,textarea:-moz-placeholder {
                color: #7ed5c4;
            }/* Mozilla Firefox 4 to 18 */    

　　除了也颜色，字体大小、粗细等也可以设置，这里就不一一列出了，你可以自己多多尝试...

 

                                                                                                                                                                                             by： 木梓李