css设置了placeholder样式同时解决placeholder显示不完整

 1.如何设置placeholder属性的样式

input::-webkit-input-placeholder{ /* WebKit, Blink, Edge */
    font-size: 20px;
    color: #ADADAD;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-size: 20px;
    color: #ADADAD;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-size: 20px;
    color: #ADADAD;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-size: 20px;
    color: #ADADAD;
}
input::-ms-input-placeholder { /* Microsoft Edge */
    font-size: 20px;
    color: #ADADAD;
}

2.解决placeholder显示不完整

在这里一定要先设置input，再设置placeholder 且 input样式一定要写在前面

input{
     text-align: center;
     margin: 10px 0 20px 60px;
     width: 210px;
     height: 22px;
}
::-webkit-input-placeholder{ /* WebKit, Blink, Edge */
    font-size: 20px;
    color: #ADADAD;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-size: 20px;
    color: #ADADAD;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-size: 20px;
    color: #ADADAD;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-size: 20px;
    color: #ADADAD;
}
::-ms-input-placeholder { /* Microsoft Edge */
    font-size: 20px;
    color: #ADADAD;
}

(css设置按钮背景颜色透明 )

.button{  
   background-color:transparent; 
   border-style:none;
}