蘋果手機input框上方有一條陰影線以及input框的placeholder顏色的設置

今天作手機端的時候，用到input框來輸入手機號碼，可是在安卓手機上input的效果是正常的，在蘋果手機上，input的上邊框會變粗，有陰影

由於蘋果手機的默認給input加上了陰影

給input加入一下代碼就解決這個問題了：

input {

border: none;

outline: none;

-webkit-appearance: none;

-webkit-appearance: none;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

 

 

 

解決完以後UI要求input的placeholder的顏色和大小，這部分使用僞類便可：

 

input::-webkit-input-placeholder {

color: rgb(200, 200, 200);

font-size: 0.3rem;

}

input::-moz-placeholder {                     /* Mozilla Firefox 19+ */

color: rgb(200, 200, 200);

font-size: 0.3rem;

}

input:-moz-placeholder {                   /* Mozilla Firefox 4 to 18 */

color: rgb(200, 200, 200);

font-size: 0.3rem;

}

input:-ms-input-placeholder {          /* Internet Explorer 10-11 */

color: rgb(200, 200, 200);

font-size: 0.3rem;

}