html - 将 CSS 和占位符文本应用于 Rails 登录表单

Question

<% title "Log in" %>

<p>Don't have an account? <%= link_to "Sign up!", signup_path %></p>

<%= form_tag sessions_path do %>
  <p>
    <%= label_tag :login, "Username or Email Address" %><br />
    <%= text_field_tag :login, params[:login] %>
  </p>
  <p>
    <%= label_tag :password %><br />
    <%= password_field_tag :password %>
  </p>
  <p><%= submit_tag "Log in" %></p>
<% end %>

如何使用 CSS 和占位符文本自定义这些登录字段？它们不像普通的 html 字段。谢谢

Answer 1

你可以看看FormTagHelper的文档.将您的表单更改为以下会将这些类应用到您的标签和字段，然后您可以按照您想要的方式设置它们的样式。

<% title "Log in" %>

<p>Don't have an account? <%= link_to "Sign up!", signup_path %></p>

<%= form_tag sessions_path do %>
  <p>
    <%= label_tag :login, "Username or Email Address", :class => "login-label" %><br />
    <%= text_field_tag :login, params[:login], :class => "login-field" %>
  </p>
  <p>
    <!-- second parameter is the content to be written inside label parameter, you can also pass nil which will humanize the first parameter -->
    <%= label_tag :password, "Password", :class => "password-label" %><br />

    <!-- second parameter is the value to be populated, you can pass nil if you don't want any -->
    <%= password_field_tag :password, nil, :class => "password-field" %>
  </p>
  <p><%= submit_tag "Log in", :class => "login-button" %></p>
<% end %>

恕我直言，内联样式不是一个好主意。