Modifying Bootstrap form's submit button to custom css

Question

I have been learning from and using elements of Hartl's Rails tutorial for my own app and learning experience. In the tutorial, in order to follow a user, the default option has been clicking through a Bootstrap-Sass button alongside Rails' form_for helper as seen below:

<%= form_for(current_user.relationships.build(followed_id: @user.id)) do |f| %>
  <div><%= f.hidden_field :followed_id %></div>
  <%= f.submit "Follow", class: "btn btn-large btn-primary" %>
<% end %>

However, I'd like to modify the input as a custom button, and changing the class from btn btn-large btn-primary to .follow-button.

My CSS for follow-button as follows. As noted in the comments, I have having trouble modifying basic elements like the transparency and font size and color (the font seem to default to the basic Bootstrap font), while other elements, such as the hover aspect does function. How do I override some of the default Bootstrap settings for forms so that all my custom elements come out? Thanks!

.follow-button{
     background: transparent;
     border: 1px solid #e8e8e8;
     display: block;
     float: right;
      &:hover { 
      background: #0089d1;
    }
      a {
      color: #006faa;
      font-weight: 400;
      font-size: 1.4em; //font size does not change
      display: block;
      padding: 0px 4px 0px 4px; //modification doesn't show..
      text-decoration: none;
      &:hover { 
      color: rgb(229, 246, 255);
      }
    }
  }

Edits:

With the updated CSS code:

.follow-button{
     background: transparent;
     border: 1px solid #e8e8e8;
     display: block;
     float: right;
      &:hover { 
      background: #0089d1;
    }
    input[type='submit'] {
      color: #006faa;
      font-weight: 400;
      font-size: 1.4em; //font size does not change
      display: block;
      padding: 0px 4px 0px 4px; //modification doesn't show..
      text-decoration: none;
      &:hover { 
      color: rgb(229, 246, 255);
      }
    }
  }

The Rails submit form:

<%= form_for(current_user.relationships.build(followed_id: @course.id)) do |f| %>
  <div><%= f.hidden_field :followed_id %></div>
  <%= f.submit "Follow", class: "follow-button" %>
<% end %>

you have tried '!important' ?

Scott Simpson
– Scott Simpson

2013-02-15 22:06:21 +00:00
Commented Feb 15, 2013 at 22:06 — Scott Simpson
– Scott Simpson, Commented Feb 15, 2013 at 22:06

Jesse Wolgamott · Accepted Answer · 2013-02-15 22:43:38Z

6

You are styling a .follow-button that contains a link (a). but f.submit creates a input type of submit. Since there is now "a", it would never match your style selectors.

<%= f.submit "Follow", class: "follow-button" %>

and then

.follow-button{
     background: transparent;
     border: 1px solid #e8e8e8;
     display: block;
     float: right;
      background: #0089d1;
      color: #006faa;
      font-weight: 400;
      font-size: 1.4em; //font size does not change
      display: block;
      padding: 0px 4px 0px 4px; //modification doesn't show..
      text-decoration: none;
      &:hover { 
        color: rgb(229, 246, 255);
        background: #0089d1;
      }
  }

edited Feb 15, 2013 at 22:43

answered Feb 15, 2013 at 22:10

Jesse Wolgamott

40.3k4 gold badges86 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

daspianist Over a year ago

Thanks for pointing this out. I pasted the code in, but the changes still didn't take effect. Restarting the rails server did not help either..

daspianist Over a year ago

I updated the body of the question with the updated code...thanks for following up. Just for the sake of trying options (my CSS-fu is weak..), I also tried input[name='commit'] which did not work.

Jesse Wolgamott Over a year ago

Ahhh, yes, it's because the input IS the follow-button. updated

Collectives™ on Stack Overflow

Modifying Bootstrap form's submit button to custom css

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related