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

Question

我一直在学习和使用哈特尔的Rails tutorial的元素为我自己的应用程序和学习经验。在本教程中，为了遵循用户，默认选项一直点击通过引导，萨斯按钮旁边Rails的form_for助手，如下图所示：

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