Question

我有一个表单，在输入中我在左侧部分使用左侧位置的背景图标。

设计工作正常，但我看到两个输入自动显示我的电子邮件和密码，所以我的背景消失了。

我尝试过使用输入：-webkit-autofill，输入：-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 http://i59.tinypic.com/hrx2br.png normal http://i59.tinypic.com/e8smki.png

Answer 1

试试这个：

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

CSS和表单自动填充背景图像

1 个答案: