how to style simple_form with material design or custom css


Tags: html,css,ruby-on-rails,material-design,simple-form

Problem :

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



Solution :

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 Howto..

    How to prevent the vertical scroll of this div?

    How to replicate PS multiply layer mode

    How to make my a scalable website with auto:height and overflow:auto

    How to change content of a div by clicking a button outside the div?

    SCSS has the color in rgba() format, but the color is in hex format. How to keep the color in RGBA() format in the genrated css?

    Why the input box is showing so different on Ipad but not on chrome

    how to handle spanish character for classname in CSS file?

    How find all elements with a specific css property in a div and add a class to div

    How to prevent artifacts from appearing in Webkit when scrolling the page after stopping CSS animations

    How can I force a list item to display on one line with CSS?

    How do I update an div css to display an complete image when section is complete?

    how to hide the border of tag (when the img load error)

    CSS: How to get rid of the extra space of first line of a paragraph?

    Is it possible to see how your html & css code would look on a mobile device without actually have a website url?

    How to get margin to be relative to text amount css

    How can i inherit properties from the css id rule to the css class?

    CSS Horizontal Menu is showing list bullets

    How to remove whitespace that appears after relative positioning an element with CSS

    How to change CSS of last tab in Bootstrap Tab

    Javascript/CSS, How to keep changes?

    How to set fit-content for width in right side - dynamic content width

    How to make CSS border-image work

    How can I remove this white space from a table?

    how to select image using css

    How to add an image to an anchor tag using CSS?

    How to achieve following graphics via css

    how to check css is valid for IE8

    JSP/HTML / JS / CSS - How to create a cancel button in form

    CSS - how to display submenu options horizontally while maintaining spacing of horizontal main menu options

    How to make a word bold in a text mentioned in bootstrap tooltip CSS/Jquery