I've developed a simple form that changes the status of the #active attribute to true or false. The form includes only one hidden_field. Below is an example of how the submit button appears when the #active status is set to true.
https://i.sstatic.net/ORWiZ.png
Upon clicking, the form submits and switches the #active attribute to false. After submission, it will display as shown in this image:
https://i.sstatic.net/UIh7I.png.
In essence, the form serves as a toggle switch that automatically submits a form to alternate between true/false for a specific attribute.
The functionality is solid. However, I aim to remove all default styling that comes with the button. I want neither the gray box nor the border. Instead, my goal is to showcase solely the font-awesome glyphicon for the button.
Below is the current code snippet displaying the glyphicon along with the gray 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>
Question: How can I strip away the button styling from the f.submit button and exclusively show the glyphicon as the representation for the submit button?