修改Bootstrap表单的提交按钮到自定义css

Question

我一直在学习和使用Hartl的Rails教程的元素,用于我自己的应用程序和学习体验.在本教程中,为了跟踪用户,默认选项一直在点击Rails form_for助手旁边的Bootstrap-Sass按钮,如下所示:

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

但是,我想将输入修改为自定义按钮,并将类更改btn btn-large btn-primary为.follow-button.

我的CSS follow-button如下.如评论中所述,我无法修改透明度,字体大小和颜色等基本元素(字体似乎默认为基本的Bootstrap字体),而其他元素(如悬停方面)则起作用.如何覆盖表单的某些默认Bootstrap设置,以便我的所有自定义元素都出来？谢谢!

.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);
      }
    }
  }

---

编辑:

使用更新的CSS代码:

.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);
      }
    }
  }

Rails提交表单:

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

Answer 1

您正在设计.follow-button包含链接(a)的样式.但f.submit创建一个输入类型的提交.由于现在有"a",它永远不会与你的风格选择器相匹配.

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

然后

.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;
      }
  }