how to style simple_form with material design or custom css

问题

I want style my simple_form in rails app with material framwork this is my login form code

Log in

<%= 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 %>

And this is sample input , i want sytle my form like this

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

回答1:

I would often prefer to ask what you have done so far, as would many other StackOverflow community members, but here's what I think you're looking for.

You can add you add your css to the assets/stylesheets folder and require it in your 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 %>

来源：https://stackoverflow.com/questions/38287695/how-to-style-simple-form-with-material-design-or-custom-css