CSS 和表单 autofil 背景图片

标签 css forms haml autofill

我有一个表单,在输入中我在左边有一个图标,使用背景和左边的位置。

该设计运行完美,但我在两个输入中看到自动出现了我的电子邮件和密码,因此我的背景消失了。

我尝试过使用 input:-webkit-autofill、input:-webkit-autofill、:focus 和 input autocomplete="off"但没有任何改变。

所以我只在第一次进入页面时遇到问题,但如果我删除自动填充文本,我会正确看到背景。

那么,无论是否有自动填充,我怎样才能让“背景”图像图标始终出现?

这是 haml:

= f.email_field :email, autofocus: true, class: "email", placeholder: "Email", autocomplete: "off"
= f.password_field :password, autocomplete: "off", class: "password", placeholder: "#{t'common.password'}"

还有 CSS:

input.email {background: $crema url("/assets/profile_mail.png") left no-repeat; background-size: 40px 40px;}      
input.password {background: $crema url("/assets/profile_password.png") left no-repeat; background-size: 40px 40px;}
input.email:focus {background: $crema url("/assets/profile_mail.png") left no-repeat; background-size: 40px 40px;}   
input.password:focus {background: $crema url("/assets/profile_password.png") left no-repeat; background-size: 40px 40px;}
input.email:-webkit-autofill:focus {background: $crema url("/assets/profile_mail.png") left no-repeat; background-size: 40px 40px;}
input.password:-webkit-autofill:focus {background: $crema url("/assets/profile_password.png") left no-repeat; background-size: 40px 40px;}

这就是我如何看待我的表格: autofill normal

最佳答案

试试这个:

<% form_for :form_name, @form_name, :html => {:autocomplete => "off"} do |f|%> ... <% end %>

关于CSS 和表单 autofil 背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25827737/

相关文章:

javascript - jQuery 无法完成提交并在地址中添加参数

javascript - 使用数据库中的数据填充 jquery 自动完成功能

html - 如何使用 Bootstrap 3 修复左侧菜单?

javascript - 使用数组构建 HTML 表单

css - 有没有办法防止:hover?

javascript - 使用 <a> 标签提交表单

ruby-on-rails - 是否有用于将整个目录从 HTML 转换为 HAML 的 bash 命令?

ruby-on-rails - Rails、HAML、使用 link_to

Gmail 中的 HTML 电子邮件液体布局中断

html - 如何在google chrome浏览器的选择框中显示图片