0

https://login.mailchimp.com/signupで、フォーム (:focus) をクリックすると、「ヘルプ メッセージ」が下に表示されます。たとえば、「あなたのメールアドレスは何ですか?」メールの下に表示されます。

彼らのcssを分析しようとしましたが、コードにそのようなものを適用できませんでした。ユーザーがフィールド内をクリックしたときに表示するようにプログラムに指示する方法など、重要なものが欠けていると思います。

これが私のコードです

レール ビュー:

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

}

4

1 に答える 1

1

CSS3 フェードイン/フェードアウト機能を使用する必要があります。このスタイルを追加してみてください:

fieldset input:focus+.field-help {
    opacity:1;
    top: 0;
    max-height: 20px;
    margin-bottom:10px;
}

デモ: http://jsfiddle.net/RVGPd/1/

于 2013-07-20T17:30:47.087 に答える