苹果手机input框上方有一条阴影线以及input框的placeholder颜色的设置

Posted 2020-11-17 采姑娘的小乌龟

今天做手机端的时候，用到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;

}