如何使用材质设计或自定义CSS设置simple_form的样式 [英] how to style simple_form with material design or custom css

问题描述

我想在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

解决方案

与许多其他StackOverflow社区成员一样，我通常更愿意问您到目前为止所做的事情，但这是我在寻找的东西. /p>

您可以添加您的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 %>

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

解决方案

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

这篇关于如何使用材质设计或自定义CSS设置simple_form的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！