css - 如何自定义使用 simple_form gem 创建的设计登录和注册表单？

Question

我在我的 Rails 应用程序中使用 devise 进行身份验证，并且我使用 simple_form gem 创建了表单。我想使用 css 自定义登录和注册表单，但似乎无法确定目标、使用哪个类并添加换行符。

这是我需要做的，

1. 在标签后添加一个换行符并将星号移到标签后。
2. 使用css自定义输入框
3. 使用 CSS 自定义注册按钮

这是我设计的注册页面 View 的样子，

<div class="formwrapper">
<center>
<h1>Sign up</h2>

<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :first_name, :label => 'First Name', required: true, autofocus: true %>
    <br>
    <%= f.input :last_name, :label => 'Last Name', required: true, autofocus: true %>
    <br>
    <%= f.input :user_name, :label => 'Username', required: true, autofocus: true %>
    <br>
    <%= f.input :email, :label => 'Email', required: true, autofocus: true %>
    <br>
    <%= f.input :password, :label => 'Password', required: true %>
    <br>
    <%= f.input :password_confirmation, :label => 'Confirm Password', required: true %>
    <br>
  </div>

  <div class="form-actions">
    <%= f.button :submit, "Sign up" %>
  </div>
<% end %>


<%= render "devise/shared/links" %>
</center>
</div>

Answer 1

好的。这很容易做到。

在您的代码中将其更改为

    <%= f.input :first_name, :label => 'First Name', required: true, autofocus: true %>

这个:-

    <%= f.input :first_name, :label => 'First Name', required: true, autofocus: true , **:class => 'yourcustomclass'** %>

与其他控件类似。