将背景图像或图像标签添加到带有集合的 Formtastic 单选按钮答案

【问题标题】：Adding a background image or an image tag to Formtastic radio buttons with a collection将背景图像或图像标签添加到带有集合的 Formtastic 单选按钮
【发布时间】：2011-09-02 10:08:33
【问题描述】：

我在用户输入他的信用卡数据的表单中有这个表单字段：

<%= form.input :credit_card_type, :as => :radio, :collection => User.credit_card_types %>

User.credit_card_types 如下所示：

  def self.credit_card_types
    {'Visa' => VISA, 'Master Card' => MASTER_CARD, 'American Express' => AMERICAN_EXPRESS}
  end

这给了我以下html：

<li id="user_credit_card_type_input" class="radio optional">
  <fieldset>
    <legend class="label">
      <label>Tipo de tarjeta</label>
    </legend>
    <ol>
      <li>
        <label for="user_credit_card_type_1">
          <input type="radio" value="1" name="user[credit_card_type]" id="user_credit_card_type_1"> Master Card
        </label>
      </li>
      <li>
        <label for="user_credit_card_type_0">
          <input type="radio" value="0" name="user[credit_card_type]" id="user_credit_card_type_0"> Visa</label>
      </li>

      <li>
        <label for="user_credit_card_type_2">
          <input type="radio" value="2" name="user[credit_card_type]" id="user_credit_card_type_2"> American Express</label>
      </li>
    </ol>
  </fieldset>
</li>

鉴于此，我的问题是，如何为每个单选按钮标签添加特定的背景图像？我不能用 CSS 做到这一点，因为标签没有任何 id，而且我不能（或者我不知道如何）把一个。我试图添加一个 image_tag 但它转义了 html。有什么建议吗？

【问题讨论】：

标签： ruby-on-rails css ruby-on-rails-3 ruby-on-rails-plugins formtastic

【解决方案1】：

Formtastic 可以根据您的需要进行定制。你应该可以在 config/initializers 中找到 Formtastic 配置文件。像这样添加一行：

Formtastic::SemanticFormHelper.builder = SemanticCustomFormBuilder

然后在你的 lib 目录中创建一个名为 semantic_custom_form_builder.rb 的文件

class SemanticCustomFormBuilder < Formtastic::SemanticFormBuilder

  def cicloon_special_radio_button_input
    #define your radiobuttons here
  end

end

您可以在表单中使用这样的自定义定义：

<%= form.input :credit_card_type, :as => :cicloon_special_radio_button %>

【讨论】：