Yes / No button

Question

I'm using autoform to ask a yes, no question and I would like to have two buttons, one that says yes, the other says no. By using aldeed:autoform-bs-button-group-input I can generate two buttons using the code below in my schema however this doesn't give the ability to style each button separately. For instance, I would like one to be green and one to be red. How can I do this?

Path: Schema.js

answer: {
        type: String,
        optional: true,
        allowedValues: ['Yes', 'No'],
        autoform: {
                type: "select-radio",
                options: function () {
                return [
                {label: "Yes", value: 'Yes'},
                {label: "No", value: 'No'},
                ];
            }
        }
    }

Path: template.js

{{#autoForm collection="questions" id=makeUniqueID doc=this type="update" autosave=true}}      
{{> afQuickField name="answer" type="select-radio" template="buttonGroup" label=false}}
{{/autoForm}}

Answer 1

First let's add a class attribute autoform:

{{#autoForm class="YesNoStyles" collection="questions" id=makeUniqueID doc=this type="update" autosave=true }}      
{{> afQuickField name="answer" type="select-radio" template="buttonGroup" label=false}}
{{/autoForm}}

This is passed to the generated <form> tag, which we can inspect and see it looks like this:

<form class="YesNoStyles" id="makeUniqueID" novalidate="novalidate">
  <div class="form-group">
    <div class="af-radio-group" data-schema-key="answer">
      <div>
        <label>
          <input type="radio" value="Yes" name="answer" id="6gWEaAr2ZWQzqtj7H"> Yes</label>
      </div>
      <div>
        <label>
          <input type="radio" value="No" name="answer" id="6gWEaAr2ZWQzqtj7H"> No</label>
      </div>
    </div>
    <span class="help-block"></span>
  </div>
</form>

Now there are two options:

1. Find the input[value="Yes"] and input[value="No"]elements, then apply css to their parent elements. This however can't be done just with css as css selectors do not allow the selection of parent elements. Meteor's onRendered callback allows us to do the following:

   Template.Question.onRendered(function(){
     $('input[value="Yes"]')[0].parentElement.classList.add('yes');
     $('input[value="No"]')[0].parentElement.classList.add('no');
   });
   

   with the following defined css classes:

   .yes {
     background-color: green;
   }
   
   .no {
     background-color: red
   }
   

2. :nth-child(i) css selector, no javascript required!

   Define the following css rules (starting with the class I added above):

   .YesNoStyles > div > div > div:nth-child(1) > label  {
     background-color: green;
   }
   
   .YesNoStyles > div > div > div:nth-child(2) > label {
     background-color: red;
   }