修改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; 
     } 
    }