消除输入框的背景色

1、出现场景：

在浏览器记住密码自动填充后，会出现这个蓝色背景，如下所示：

2、解决方式：

给input组件加一个box-shadow属性，设置内置阴影！值要大于你的input高度才能完全覆盖住

以下是使用uniapp框架的代码，如下：

<view class="login-info">
    <view class="item">
        <input class="clear-bg" name="username" type="text" placeholder="请输入用户名"                 @input="inputUsername" style="box-shadow: 0 0 0 54rpx #fff inset;"></input>
    </view>
    <view class="item">
        <input class="clear-bg" name="password" type="text" password="true" placeholder="请输入密码" @input="inputPassword"></input>
    </view>
</view>

uniapp中input组件被重组，父组件修改子组件，需要深度处理一下，如下所示：

// 坑：输入框背景色问题
 /deep/.clear-bg .uni-input-input{
    box-shadow: 0 0 0 54rpx #fff inset;
}

如果是一般的css，直接设置box-shadow属性即可。

3、可能遇到的问题：placeholder文字没有了，

出现这种情况，用下面的方式解决：

/deep/.uni-input-wrapper,.uni-input{
  background: none !important;
}