ios input样式无法修改的坑(-webkit-appearance: none;)

开发过程中遇到这样的问题,input按钮和日期控件…的样式在ios手机上无法被修改.

-webkit-appearance 是改变按钮和其他控件的外观, 使其类似于原生控件.

-webkit-appearance: none; 去除系统默认appearance的样式,常用于IOS下移除原生样式

坑 重现:
css:

  <style>
    .demo {
      /* -webkit-appearance: none; */
      width: 300px;
      height: 50px;
      background: #ff0369;
    }
  </style>

html:

<body>
  <br />
  <input class="demo" type="date">
  <br />
  <br />
  <input class="demo" type="button" value="爱卡卡">
</body>

在这里插入图片描述
填坑:
在这里插入图片描述

完成效果:

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43817197/article/details/91970704