How to customize devise form css in rails

Devise will use you default layout. So the CSS that you are using in your views/layouts/application.html.erb will be used in your generated devise views.

If you want devise specific layouts, you can create a views/layouts/devise.html.erb file where you can serve devise specific CSS. It will pick it up automatically because of Rails naming conventions.

The above will work for any controller, just add a file in layouts named after the controller eg. views/layouts/reservations.html.erb for ReservationsController

You can also add specific layouts for the Devise::RegistrationsController by making a directory views/layouts/devise and adding views/layouts/devise/registrations.html.erb

If you are doing controller-specific stylesheets, that is, if you switched off automatic compilation of all of your stylesheets into application.css, you should name your stylesheet after a devise controller, e.g.:

registrations.css.scss

and add it to Rails.application.config.assets.precompile list in assets.rb.

The placement of the stylesheet is standard, app/assets/stylesheets/ so watch for name collisions between devise's controllers and yours.

To pick up a controller-specific stylesheet in a layout you need something like this:

Rails up to 4.1

<%= stylesheet_link_tag controller_name, media: 'all' if Rails.application.assets.find_asset("#{controller_name}.css") %>

Rails 4.2+

<%= stylesheet_link_tag controller_name, media: 'all' if asset_present?("#{controller_name}.css") %># ...meanwhile, somewhere in the helpers...def asset_present?(name)  # Rails 4.1 had Rails.application.assets filled out in all environments.  # Rails 4.2 has it filled only when config.assets.compile == true which is only  # in development by default.  if Rails.application.assets.present?    Rails.application.assets.find_asset(name)  else    Rails.application.assets_manifest.files.values.map { |v| v['logical_path'] }.include?(name)  endend

To generate device view run this line

rails generate devise:views

and do what ever you want with page styling.

to read more Click here