css - 将 Bootstrap 表单的提交按钮修改为自定义 css

Question

我一直在学习和使用 Hartl 的元素 Rails tutorial对于我自己的应用程序和学习经验。在本教程中，为了关注用户，默认选项是单击 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。

我的 follow-button CSS 如下。如评论中所述，我在修改透明度、字体大小和颜色等基本元素时遇到了麻烦(字体似乎默认为基本的 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

您正在设计一个包含链接 (a) 的 .follow-button。但是 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;
      }
  }