今天做手机端的时候,用到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;
}
原文地址:https://www.cnblogs.com/lyyguniang/p/9176852.html