苹果手机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;
}
posted @ 2018-06-13 11:24  采姑娘的小乌龟  阅读(409)  评论(0编辑  收藏  举报