码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-06-13 15:17:44      阅读:1637      评论:0      收藏:0      [点我收藏+]

标签:使用   手机号   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颜色的设置

标签:使用   手机号   nbsp   苹果手机   效果   inpu   intern   appear   span   

原文地址:https://www.cnblogs.com/lyyguniang/p/9176852.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!