title: Rails Devise & Simple Form
body: <p>I am trying to make an app with Rails 4, devise and simple form.</p>
  
  <p>The devise view has a standard remember me checkbox, which I am trying to format. </p>
  
  <p>I read a blog post showing me how to alter the devise checkbox aligment for the remember me field (which as a standard pushes the checkbox to the left of the vertical alignment of the other fields in the form.</p>
  
  <p>To fix this, I changed my framework_and_overrides.css.scss to include:</p>
  
  <pre><code>.checkbox input[type="checkbox"] {
    margin-left: 0;
  }
  </code></pre>
  
  <p>Now, when I try to use the devise form, the checkbox appears on top of the letter 'R' in the remember me label.</p>
  
  <p>Also, my css to style the words 'remember me' won't apply to that text.</p>
  
  <p>My field currently has:</p>
  
  <pre><code>        &lt;%= f.input :remember_me,  as: :boolean,  inline_label: true, :input_html =&gt; {:class =&gt; 'deviselabels'}, label: false if devise_mapping.rememberable? %&gt;
  </code></pre>
  
  <p>The styling I'm trying to apply is in the 'devise labels' class - it changes the font color and size. But it isn't working on this specific form element. It works fine on the other elements in the form and doesnt alter margins:</p>
  
  <pre><code>.deviselinks {
    font-family: 'Quicksand', sans-serif;
    color: white;
      a:link {text-decoration:none; background-color:transparent; color:white;};
      a:visited {text-decoration:none;background-color:transparent; color:white;};
      a:hover {text-decoration:none;background-color:transparent; color:white;};
      a:active {text-decoration:none;background-color:transparent; color:white;};
  
  }
  </code></pre>
  
  <p>Does anyone know how to move the words 'remember me' over so they are to the left of the check box (rather than the 'R' being underneath the checkbox)?  Also, how do I apply my font styling to the words 'Remember me'?</p>
  
  <p>The entire new session form is:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6 col-md-offset-3"&gt;
  
        &lt;div class="devisetitle"&gt;Welcome back&lt;/div&gt;
      &lt;/div&gt;
  
    &lt;%= simple_form_for(resource, as: resource_name, :html =&gt; {:id =&gt; "sign_in_user"}, url: session_path(resource_name)) do |f| %&gt;
  
  
        &lt;div class="row"&gt;
          &lt;div class="col-md-3 col-md-offset-3"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
  
  
                &lt;%- if devise_mapping.omniauthable? %&gt;
  
                    &lt;div class="facebookauth"&gt;
                      &lt;%= link_to "Login with Facebook", user_omniauth_authorize_path(:facebook) %&gt;
                    &lt;/div&gt;
  
                &lt;% end -%&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
  
  
                &lt;%- if devise_mapping.omniauthable? %&gt;
  
                    &lt;div class="googleauth"&gt;
                      &lt;%= link_to "Login with Google", user_omniauth_authorize_path(:google_oauth2) %&gt;
                    &lt;/div&gt;
  
                &lt;% end -%&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
  
  
            &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
  
                &lt;%- if devise_mapping.omniauthable? %&gt;
                    &lt;div class="linkedinauth"&gt;
                      &lt;%= link_to "Login with LinkedIn", user_omniauth_authorize_path(:linkedin) %&gt;
                    &lt;/div&gt;
  
                &lt;% end -%&gt;
  
  
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
  
  
  
          &lt;div class="col-md-5"&gt;
            &lt;div class="emailform"&gt;
              &lt;div class="form-inputs", style="margin-left: 7%"&gt;
  
  
                &lt;%= devise_error_messages! %&gt;
  
  
                  &lt;%= f.input :email, :label_html =&gt; {:class =&gt; 'deviselabels'}, placeholder: 'Enter email',  autofocus: true, :input_html =&gt; {:maxlength =&gt; 25, :size =&gt; 40, class: 'lineitemdevise'} %&gt;
                  &lt;%= f.input :password, :label_html =&gt; {:class =&gt; 'deviselabels'},  placeholder: 'At least 8 characters', :input_html =&gt; {:maxlength =&gt; 15, :size =&gt; 40, class: 'lineitemdevise'} %&gt;
  
                  &lt;%= f.input :remember_me,  as: :boolean,  inline_label: true, :input_html =&gt; {:class =&gt; 'deviselabels'}, label: false if devise_mapping.rememberable? %&gt;
  
             &lt;/div&gt;
  
              &lt;div class="form-actions"&gt;
                &lt;%= f.button :submit, "Login", :class =&gt; "dcpb" %&gt;
              &lt;/div&gt;
    &lt;% end %&gt;
  
    &lt;/div&gt;
  
  
    &lt;/div&gt;
  
  
  
    &lt;div class="row"&gt;
      &lt;div class="col-md-6 col-md-offset-3"&gt;
        &lt;div class="loginredirect"&gt;
          &lt;%= render "devise/shared/links" %&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>