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

Posted 采姑娘的小乌龟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了苹果手机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;
}

以上是关于苹果手机input框上方有一条阴影线以及input框的placeholder颜色的设置的主要内容,如果未能解决你的问题,请参考以下文章

在苹果手机上input有内阴影怎么去除

关于input,button标签在苹果手机上显示阴影解决办法

清除移动端输入框内的阴影

input[type=submit]以及数字日期在苹果手机上显示异常的处理

input text 在苹果微信浏览器中有上上阴影

为Input输入框添加圆角并去除阴影 去除获得焦点时方角样式