ラジオボタンを実際のボタンに変更する - Ruby on Railsシンプルフォームギフト

Question

私はこれを複数回試みましたが、シンプルフォームの宝石が作る自動ラッパーを使ってどのように行うのかについては頭がいっぱいです。私はこのように見えるのラジオボタンの標準出力を作成しようとしているのRuby on Rails（プラス簡単なフォーム宝石）を使用して

：

ルビー：

<%= 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> 

はこのようなもののように見えるとST私はシンプルな形で動作するように取得することができ、様々なCSSの私が見つけた解決策が、何をしようとした

：もちろんの病気は、真/偽の値を保持します。どんな助けでも大変感謝しています。

EDIT：コメントの質問ごとに、私はまた、ブートストラップを使用しているよう

明確にします。

Answer 1

実際のラジオボタンを非表示にし、カスタムボタンをそのラベルに設定することができます。 カスタムボタンは、ラジオボタンがチェックされているか否かを問わず、スタイリングすることができます。ここで

は Rails Simple Form宝石の別の関数を使用してフィールドを生成する例です。

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>