Question

我有一个Rails 4，它使用Rails的默认表单（我不使用简单表单）。

在我的一个表单中，我想设置以下提交按钮的样式：

<td>
  <%= f.submit %>
</td>

我尝试将id应用于td，但这显然将我的新风格应用于整个表格单元格。

然后，我尝试将id应用于提交按钮本身as recommended here，如下所示：

<td>
  <%= f.submit, :id => 'create_post' %>
</td>

这给了我以下错误：

SyntaxError in CalendarsController#show
/Users/TXC/code/rails/calendy/app/views/calendars/show.html.erb:69: syntax error, unexpected =>, expecting :: or '[' or '.' ...er.append=( f.submit, :class => 'create_post' );@output_buff... ... ^
<%= f.submit, :class => 'create_post' %>

将自定义样式应用于Rails中的提交按钮有什么好方法？

Answer 1

尝试将语法更改为：

<%= f.submit, id: 'create_post' %>

Answer 2

<%= f.submit, :class => "blue button" %>

和

<%= f.submit, class: "blue button" %>

首先，以上两个都是有效的语法，两者都有效。第一个是旧的哈希语法，第二个是添加到ruby 1.9的新哈希语法。

：old_hash_syntax =＆gt; ＆＃34;某事......＆＃34; new_syntax_key：＆＃34;＆＃34;

因此，语法没有问题：

<%= f.submit, :class => "create_post" %>

因此发生的语法错误不是来自上面的行。有问题的语法在该行之前，可能在该表单中的其他位置。很难找到，没有看到f.submit

之前的表格行

接下来，我不确定您尝试使用td标记做什么，但很可能是错误的，删除它们。标签用于定义表格中的单元格。 td用于表格数据。希望你实际上没有一个表，并且错误地抛出了td标签。在这种情况下，只需删除td标签，它们仅用于表数据。如果表中有表单，则应该重新考虑表是否必要以及它提供的实用程序。表格不用于样式表格，我无法想出将表格放在表格中的任何明智理由。

如果你只想设置按钮的样式，那么就不需要将f.submit放在erb标签之外的div标签或html标签中。只需在f.submit标记中指定css类。相应的CSS样式将应用于f.submit。所以使用，

<%= f.submit, :class => "custom_button" %>

或：＆lt;％= f.submit，class：＆＃34; custom_button＆＃34; ％GT;

两种语法都可以。样式位于css，.custom_button {style properties}中。因此，您需要做的是在f.submit标记之前找到语法错误的来源并将其删除。接下来，在f.submit标记中指定适当的类。繁荣你的所有设置，css将被应用。

Answer 3

我遇到了同样的问题，试图重新设置＆lt;％= f.submit％＆gt;以帮助器_form.html.erb形式提交按钮，该按钮仍在Rails 5模板中使用。

我的解决方案，与表单助手和Bootstrap一起使用，是提交还需要给出一个id（在它下面是：create），它也是按钮的标签。

那么，对我有用的是：＆lt;％= f.submit：create，class：＆＃34; btn btn-default＆＃34;％＆gt;

Answer 4

在使用 Rails 6 应用程序和 Bootstrap 4 时，我也面临同样的挑战。

我尝试了这个，对我有用：

<%= f.submit class: 'btn btn-primary' %>

OR

<%= form.submit class: 'btn btn-primary' %>

注意：请勿在{{1}}或f.submit与form.submit之间添加任何逗号。

或者，如果您想添加不同的标签，也可以尝试以下操作：

class

OR

<%= f.submit "Create", class: 'btn btn-primary' %>

仅此而已。

我希望这会有所帮助

Rails 4：如何设置表单提交按钮

4 个答案: