如何使用 material 设计或自定义 css 设计 simple_form 风格

Question

我想在 rails 应用中使用 material 框架设计我的 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

与许多其他 Whosebug 社区成员一样，我经常更愿意询问您到目前为止所做的事情，但我认为这就是您正在寻找的内容。

您可以将 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 %>

如何使用 material 设计或自定义 css 设计 simple_form 风格

how to style simple_form with material design or custom css

html

css

ruby-on-rails

simple-form

material-design

登录