方法三
黄色背景本质上是这么一串 CSS 导致的
- input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
- background-color: rgb(250, 255, 189) !important;
- background-image: none !important;
- color: rgb(0, 0, 0) !important;
- }
那么解决方法就是将背景去除
使用 background-clip 属性进行处理
将背景的填充框选择为 content-box(关于更多 background-clip 填充值, 盒子模型, 详见 MDN https://developer.mozilla.org/zh-CN/ )
再将 height 修为 0, 即可把 content-box 高度设置为 0, 从而黄色背景消失了
注: 这里不能同时将 width 修为 0, 会导致内容消失
- <!-- 附上第一幅图片效果的代码 -->
- <input
- type="username"
- placeholder="用户名"
- id="username"
- name="username"
- class="login-input"
- >
- <style>
- .login-input {
- background: transparent content-box;
- box-sizing: border-box;
- width: 90%;
- height: 0;
- padding: 15px 5%;
- outline: none;
- border: none;
- border-bottom: 1px solid #333;
- margin-bottom: 20px;
- }
- </style>
来源: https://juejin.im/post/5c5a7eebf265da2da67c068d