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

標籤：使用   手機號   nbsp   蘋果手機   效果   inpu   intern   appear   span   

今天做手機端的時候，用到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;}

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