ios输入框（input）背景色为白色无法去除

最新推荐文章于 2024-09-27 14:33:02 发布

shuiqianheniunai

最新推荐文章于 2024-09-27 14:33:02 发布

阅读量4.3k

点赞数 4

文章标签： ios 前端 javascript css

本文链接：https://blog.csdn.net/shuiqianheniunai/article/details/121675650

版权

在开发中遇见ios高版本的输入框有个默认背景色为白色，且radius也继承了外面div的样式。

在网上学习后，了解到是在ios中，background的transparent属性是无效的，因此在安卓中看似正常的但在ios高版本手机中会出现这种不透明的情况。为了解决这一问题，我在全局样式中加入了下面两端css样式。

1、使得选择历史记录中的值后，输入框背景色不会改变。

input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
}
2、消除ios存在的输入框不透明问题
input {
  -webkit-appearance:none;
  border-radius: 0;
  outline:none;
  background：ragb(0,0,0,0)
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

如果在使用了上述第二段代码后，ios的异常还是没有解决，可以看一下自己的input标签中，是否写着 type=“search”，因为这一段代码会使得输入框具有默认样式。

<input   className="weui-search-bar__input" type="search" id="searchInput1" onKeyUp={searchThisName}  value={customerName1} onChange={changeName} placeholder="请输入客户名称" required />

只要将type="search"去掉即可。

希望文章对您有帮助。