2016-11-14 2 views
0

У меня есть простая форма, которая просто устанавливает атрибут #active в true/false. В пределах формы есть только один hidden_field. Вот как у меня в настоящее время есть кнопка отправки для формы, которая смотрит, когда статус #active является истинным.Удалить стиль стилей От f.submit в Rails Форма

active button

При нажатии, форма будет представлять и изменить #active атрибут false. При повторном воспроизведении он будет выглядеть так:

inactive button.

В основном форма функционирует как тумблер, который за кулисами представляет форму, которая переключает атрибут в true/false.

Он работает чудесно. Тем не менее, я не хочу никакого стиля по умолчанию button. Я не хочу этого серого ящика или границы. Вместо этого: я хочу показать только этот шрифт - великолепный глификон для кнопки, и все.

Вот код, который я в настоящее время, который отображает glyphicon с серой кнопкой 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 и только имею glyphicon к представляют кнопку отправки?

+0

Вы используете загрузчик? Стилирование должно происходить из одного из классов, которые вы добавили. Я мог бы добавить тег css к этой проблеме. – jmkoni

ответ

0

Хотелось бы услышать, есть ли лучшее решение. В основном все, что я сделал, было добавлено новый класс 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; 
} 

active

inactive

Смежные вопросы