html - 如何使用 Material 设计或自定义 CSS 设置 simple_form 的样式

Question

我想在 rails 应用程序中使用 material framwork 设计我的 simple_form这是我的登录表单代码

登录

<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div class="form-inputs">
    <%= f.input :login %>
    <%= f.input :password, required: false %>
    <%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
  </div>

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

这是示例输入，我想像这样设置我的表单

https://codepen.io/sevilayha/pen/IdGKH

Answer 1

与许多其他 StackOverflow 社区成员一样，我通常更愿意问您到目前为止做了什么，但我认为您正在寻找的是这些。

您可以添加您的 css 到 assets/stylesheets 文件夹并在您的 application.css 中要求它

<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div class="group">
    <%= f.input :login %>
    <span class="highlight"></span>
    <span class="bar"></span>
    <%= f.label :login %>
  </div>

  <div class="group">
    <%= f.input :password, required: false %>
    <span class="highlight"></span>
    <span class="bar"></span>
    <%= f.label :password %>
  </div>

  <%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>

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