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

Question

我有一个简单的表单，只需将#active属性设置为true / false。 在表单中，只有一个单一的hidden_field 。 这是当前#active状态为true时，表单的提交按钮的外观。

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

。

基本上，表单用作切换开关，在后台提交表单以将属性切换为true / false。

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

这是我当前拥有的代码，该代码使用灰色按钮css显示glyphicon：

<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按钮中f.submit按钮样式，而仅使用glyphicon来表示Submit按钮？

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