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