修改 <%= f.submit %> 的默认 CSS 输入类

Posted 2023-02-26

【中文标题】修改 <%= f.submit %> 的默认 CSS 输入类

【英文标题】：Modifying <%= f.submit %>'s default CSS input class

【发布时间】：2013-02-27 03:01:29

【问题描述】：

我一直在尝试让<%= f.submit %> 与我的其他“按钮”一样出现，并且全部连续显示，但运气不佳。我在修改f.submit 的类时发现了this helpful post，但在浏览器中检查它的元素时意识到它采用了input 的类，无论我添加了哪些附加类作为选项参数，从而限制了它的外观。

基本上，我的其他每个按钮都具有以下形式：

<div class="sort-nav">
  <ul>
    <li><h4><%= link_to "Some stuff", some_link_path %></h4></li>
  </ul>
</div>

我想知道是否有一种方法可以将所有这些样式压缩到一个类中，并覆盖 f.submit 中包含的 input 类。谢谢。

---

为了启迪，这个按钮将成为我的“关注”/取消关注按钮，用于创建或销毁关系，我首先打算使用以下代码呈现 _follow_form 部分：

  <% if current_user.following?(@course) %>
    <%= render 'unfollow' %>
  <% else %>
    <%= render 'follow' %>
  <% end %>

每个 _followpartial 看起来如下所示：

<%= form_for(current_user.relationships.build(followed_id: @course.id)) do |f| %>
  <%= f.hidden_field :followed_id %>
  <%= f.submit "Follow course" %>
<% end %>

【参考方案1】：

有点骇人听闻，但您始终可以使用 js 提交表单，因此不要使用f.submit，而是将其更改为

<div class="sort-nav">
  <ul>
    <li>
      <h4><%= link_to_function "Some stuff", '$(this).closest("form").submit()' %></h4
    </li>
  </ul>
</div>

【讨论】：

谢谢！这实际上看起来像是最佳解决方案，因为它适合我制作的其余按钮。唯一的问题是我实际上打算渲染一系列部分，这个按钮将作用于create 或destroy 关系（我在上面的问题中发布了更多代码）.. 我不确定我怎么能在这里使用 js.. 再次感谢。

用 html 更改这个 有什么问题？

你能再试一次吗？错误是由于js上的引号引起的。请尝试更新的答案

我实际上注意到了一个问题：虽然新的关注/取消关注按钮的顶部与其他按钮对齐，但底部总是比其他部分延伸一点。即使做类似padding-bottom: -10px 的事情也不起作用。我不确定是否添加了额外的行，尽管使用 CSS 尝试了几个选项，但按钮仍然比其他按钮延伸得更长。

谢谢！我的 css-fu 很弱.. 这很有帮助。