如何使用材料设计或自定义 css 设置 simple_form 样式

【问题标题】：how to style simple_form with material design or custom css如何使用材料设计或自定义 css 设置 simple_form 样式
【发布时间】：2016-11-12 06:20:52
【问题描述】：

我想在 Rails 应用程序中使用材质框架设置我的 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

【问题讨论】：

标签： html css ruby-on-rails material-design simple-form

【解决方案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 %>

【讨论】：