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

相关文章:

  • 2022-02-08
  • 2022-12-23
  • 2018-04-04
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-03-08
  • 2021-12-26
猜你喜欢
  • 2022-12-23
  • 2022-01-07
  • 2022-12-23
  • 2022-12-23
  • 2021-06-05
  • 2022-12-23
  • 2021-12-15
相关资源
相似解决方案