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

Question

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

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

红宝石：

 <%= 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 Formgem 的另一个函数生成字段的示例：

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

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;
}