从 Rails 表单中的 f.submit 中删除按钮样式答案

【问题标题】：Remove Button Styling From f.submit in Rails Form从 Rails 表单中的 f.submit 中删除按钮样式
【发布时间】：2016-11-14 16:35:39
【问题描述】：

我有一个简单的表单，它只是将#active 属性设置为真/假。在表格中只有一个hidden_field。这是我目前在#active 状态为真时查看表单的提交按钮的方式。

点击后，表单将提交并将#active 属性更改为false。重新显示后将如下所示：

表单的功能基本上是一个切换开关，在后台提交一个表单，将属性切换为真/假。

效果很好。但是，我不想要任何默认的 button 样式。我不想要那个灰色框或边框。相反：我只想为按钮显示字体真棒字形，就是这样。

这是我目前拥有的代码，它显示带有灰色按钮 css 的字形图标：

<td>
  <%= form_for blog do |f| %>

    <% if blog.active %>
      <%= f.hidden_field :active, value: false  %>
    <% else %>
      <%= f.hidden_field :active, value: true  %>
    <% end  %>

    <% if blog.active? %>
      <%= f.button do %>
        <i class="fa fa-toggle-on fa-2x text-success" aria-hidden="true"></i>
      <% end %>
    <% else %>
      <%= f.button do %>
        <i class="fa fa-toggle-off fa-2x text-danger" aria-hidden="true"></i>
      <% end %>
    <% end  %>
  <% end %>
</td>

问题：我怎样才能去掉f.submit按钮的按钮样式，而只有字形图标来代表提交按钮？

【问题讨论】：

你在使用引导程序吗？样式必须来自您添加的类之一。我可能会将 css 标记添加到此问题中。

标签： css ruby-on-rails ruby

【解决方案1】：

很想知道是否有更好的解决方案。基本上我所做的只是添加了一个新的 css 类，它将background 属性设置为none，将border 属性设置为none。

<% if blog.active? %>
  <%= f.button, class: 'remove-submit-btn-style' do %>
    <i class="fa fa-toggle-on fa-2x text-success" aria-hidden="true"></i>
  <% end %>
<% else %>
  <%= f.button, class: 'remove-submit-btn-style' do %>
    <i class="fa fa-toggle-off fa-2x text-danger" aria-hidden="true"></i>
  <% end %>
<% end  %>

然后在app/assets/stylesheets/application.scss

.remove-submit-btn-style {
  background: none;
  border: none;
}

【讨论】：