关于 https://login.mailchimp.com/signup , 当你点击一个表单 (:focus) 时,下面会出现一条“帮助信息”。例如“你的电子邮件地址是什么?”出现在电子邮件下方。
我试图分析他们的 css,但我没有在我的代码中应用这样的东西。 我想我遗漏了一些重要的东西,比如如何告诉程序我希望它在用户单击该字段时出现。
这是我的代码
rails View :
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {:class => 'form-vertical' }) do |f| %>
<fieldset>
<%= f.error_notification %>
<%= display_base_errors resource %>
<%= f.input :email, :required => true, placeholder: t("devise.registrations.sign_up_page.whats_your_email_address") %>
<div class="field-help"> What's your email address? </div>
<%= f.input :password, :required => true %>
<%= f.input :password_confirmation, :required => true %>
<div class="fullsized"><%= f.button :submit, t("devise.registrations.sign_up_page.sign_up"), :class => 'btn-primary' %>
</div>
</fieldset>
<% end %>
CSS:
.field-help {
-webkit-transition: all 0.25s ease-in-out 0s;
-moz-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
-ms-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
display: block;
opacity: 0;
max-height: 0;
top: -1.8461538461538463em;
overflow: hidden;
white-space: normal;
width: 100%;
max-width: 550px;
word-wrap: break-word;
font-size: 0.8125em;
line-height: 1.3846153846153846em;
font-weight: 700;
position: relative;
color: #737373;
letter-spacing: .01em
最佳答案
您应该使用 CSS3 淡入/淡出技巧。尝试添加这种风格:
fieldset input:focus+.field-help {
opacity:1;
top: 0;
max-height: 20px;
margin-bottom:10px;
}
关于ruby-on-rails - 使用 Rails/devise/boostrap/simple_form 使帮助消息出现在表单字段下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17764144/