Rails：如何使用自定义CSS样式化提交按钮

Question

下面的代码创建了一个表单并根据一些CSS（“button”）样式化了“submit”按钮。问题是，当页面呈现时，它显示了普通的Rails提交标签按钮，并覆盖了自定义的“button” CSS。我该如何禁用Rails提交标签按钮的视觉效果，同时仍然使其提交表单？

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

- Ben Downey

---

你能提供生成的HTML和CSS吗？ - Dougui

Answer 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'

- Dougui

Answer 2

我正在使用老版本的Ruby（1.8.7）和Rails（2.3.5）。

以下是我的自定义CSS样式提交标签：

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

“Edit”是按钮上显示的文本，“width:30px;”是我的样式。您还可以级联样式：

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

- Max Alexander Hanna

Answer 3

另一种方法是（Rails 4.1）

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

这里是你寻找答案的地方 http://api.rubyonrails.org/

如果你在使用 form_for，你需要执行以下操作

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

- alexl

---

这些类并不像你所说的那样内置于Rails中。它们是内置于Bootstrap (http://getbootstrap.com/)中的，为了使用它们，必须将Bootstrap添加到你的Rails应用程序中。 - Joseph Gill

Answer 4

你可以向哈希表中添加 style 键。

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

- copremesis