Rails：如何使用自定义 CSS 设置提交标签的样式答案

【问题标题】：Rails: how to style submit tag with custom cssRails：如何使用自定义 CSS 设置提交标签的样式
【发布时间】：2012-07-23 16:49:12
【问题描述】：

下面的代码根据一些 css（“按钮”）创建一个表单并设置“提交”按钮的样式。问题是，当页面呈现时，它会在自定义的“按钮”css 之上显示正常的rails 提交标签按钮。如何在提交表单的同时静音或禁用 rails 提交标签按钮的视觉效果？

=form_tag new_site_url, :method => :get do
  =text_field_tag :homepage,'', type: "text", class: 'text'
  %button
    =submit_tag "GO!"

【问题讨论】：

【解决方案1】：

你可以这样做吗：

=form_tag new_site_url, :method => :get do
  =text_field_tag :homepage,'', type: "text", class: 'text'
  =submit_tag "GO!", class: 'button'

并设置按钮的css样式？

最好这样做：

=form_tag new_site_url, :method => :get do |f|
  =f.text_field '', type: "text", class: 'text'
  =f.submit "GO!", class: 'button'

【讨论】：

【解决方案2】：

另一种方法是（rails 4.1）

<%= submit_tag("Submit", :class => "btn btn-warning" ) %>

您可以在这里找到答案http://api.rubyonrails.org/

如果你在 form_for 工作，你会这样做

<%= f.submit("Submit", class: "btn btn-default" ) %>

【讨论】：

这些类不像你建议的那样内置在 Rails 中。这些内置在 Bootstrap (getbootstrap.com) 中，必须将其添加到您的 Rails 应用程序中才能使用它。

【解决方案3】：

我使用的是老式 ruby(1.8.7) 和 rails(2.3.5)

这是我的提交标签对于自定义 css 样式的外观：

<%= submit_tag("Edit", :style => "width:30px;") %>

其中“编辑”是按钮上显示的文本，“宽度：30px;”是我的造型。您还可以级联样式：

<%= submit_tag("Edit", :style => "width:30px;color:blue;") %>

【讨论】：

【解决方案4】：

您可以向哈希添加样式键

<p><%= submit_tag l(:button_apply), :class => 'btn btn-default btn-sm', :name => 'submit', :style => 'margin-left: 42px' %></p>

【讨论】：