Ändern Sie Radiobuttons in tatsächliche Schaltflächen - Ruby on Rails Einfache Form Gem

Question

Ich habe mehrere Versuche gemacht, dies zu tun, aber kann einfach nicht den Kopf herum, wie man es mit den automatischen Wrapper, die die Simple Form-Edelstein macht.

Mit Ruby on Rails (plus Einfaches Formular Gem) Ich versuche, die Standard-Ausgabe von Optionsfeldern zu machen, die wie folgt aussehen:

Rubin:

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

HTML Ausgabe:

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

Aussehen wie etwas und st krank natürlich halten Sie den wahr/falsch-Wert:

ich verschiedene CSS-Lösungen ausprobiert habe ich gefunden habe, aber nichts, was ich bekommen kann mit einfachem Formular zu arbeiten. Jede Hilfe sehr geschätzt, danke.

EDIT:

Um per Kommentar Frage zu klären, ich bin mit Bootstrap auch.

Answer 1

Sie können das echte Optionsfeld ausblenden und Ihre benutzerdefinierte Schaltfläche als Bezeichnung festlegen. Dann kann die benutzerdefinierte Schaltfläche relativ dazu gestaltet werden, ob der Optionsschalter aktiviert ist oder nicht.

Hier ist ein Beispiel der Felder mit einer anderen Funktion von Rails Simple Form gem Erzeugung:

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>