将单选按钮更改为实际按钮 - Ruby on Rails Simple Form Gem

Question

我已多次尝试这样做，但我们无法理解如何使用Simple Form gem制作的自动包装器。

使用Ruby on Rails（加上Simple Form Gem）我试图让单选按钮的标准输出看起来像这样：

Ruby：

 <%= n.input :domiciled, as: :radio_buttons, label: "Do you confirm your business is domicled in the United Kingdom?", checked: true %>

HTML输出：

 <div class="form-group radio_buttons optional user_nurse_domiciled">
     <label class="control-label radio_buttons optional">Do you confirm your business is domicled in the United Kingdom?
     </label>
          <input type="hidden" name="user[nurse_attributes][domiciled]" value="">
               <span class="radio">
                  <label for="user_nurse_attributes_domiciled_true">
                     <input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][domiciled]" id="user_nurse_attributes_domiciled_true">Yes
                  </label>
               </span>
               <span class="radio">
                    <label for="user_nurse_attributes_domiciled_false">
                        <input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][domiciled]" id="user_nurse_attributes_domiciled_false">No
                     </label>
                 </span>
   </div>

看起来像这样的东西，当然仍然保持真/假值：

我已经尝试了各种CSS解决方案，但我没有找到任何可以使用Simple Form的方法。任何帮助非常感谢。

编辑：

根据评论问题澄清，我也使用Bootstrap。

Answer 1

您可以隐藏真实的单选按钮，并将自定义按钮设置为其标签。 然后可以相对于选中或不选中单选按钮来设置自定义按钮的样式。

以下是使用Rails Simple Form gem：

的另一个函数生成字段的示例

f.collection_radio_buttons : domiciled, [[true, 'Yes'] ,[false, 'No']], :first, :last

input[type="radio"] {
  display:none;
}

label {
  border: 1px solid #DDD;
  border-radius:5px;
  padding:10px;
  margin-top:10px;
  display:block;
  position:relative;
}

label:hover {
  cursor:pointer;
  background-color:#EEE;
}

input[type="radio"]:checked + label {
  background-color:#DDD;
}

<input id="user_options_true" name="user[options]" type="radio" value="true" />
<label class="collection_radio_buttons" for="user_options_true">Yes</label>
<input id="user_options_false" name="user[options]" type="radio" value="false" />
<label class="collection_radio_buttons" for="user_options_false">No</label>