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

Posted 2023-02-24

【中文标题】CSS 和表单自动填充背景图片

【英文标题】：CSS and form autofil background image

【发布时间】：2014-09-13 21:10:04

【问题描述】：

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

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

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

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

那么，如果有自动填充，我怎样才能让“背景”图像图标始终出现？

这是哈姆：

= 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;

这就是我对表单的看法：

【问题讨论】：

<form autocomplete="off"> </form>

好的，但是我怎样才能将自动完成功能放在 haml 标签内：= form_for (resource, as: resource_name, url: session_path(resource_name)) do |f|？谢谢

我在下面发布了答案。我没有经常使用haml，这就是为什么不能制作准确的代码。你必须用你的代码来调整它。

【参考方案1】：

试试这个：

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