title: Active state for radio button labels with no value
body: <p>I have a CMS that outputs radio buttons without a value field. I think I could've target each field based on its value with jQuery to assign &quot;active&quot; class but I don't have that option now. Is there a way to assign and style the 'active' item with either CSS or jQuery for this? Please note, the current CSS is hiding the input radio buttons and it's showing the labels only. So the active state should be assigned and styles for labels.</p>
  <pre><code>&lt;div class=&quot;form_responses&quot;&gt;
  &lt;div class=&quot;form_response&quot;&gt;
      &lt;input id=&quot;form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_1&quot; type=&quot;radio&quot; data-text=&quot;Yes&quot; name=&quot;form_3c0cb7b9-a09a-4a95-be27-e27923448c8e&quot; checked=&quot;checked&quot; value=&quot;923518fd-e6ce-4989-8342-15d9b22e5a20&quot; autocomplete=&quot;off&quot; required=&quot;required&quot; data-handler-change=&quot;1&quot;&gt;
      &lt;label for=&quot;form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_1&quot;&gt;Yes&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form_response&quot;&gt;
      &lt;input id=&quot;form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_2&quot; type=&quot;radio&quot; data-text=&quot;Undecided&quot; name=&quot;form_3c0cb7b9-a09a-4a95-be27-e27923448c8e&quot; value=&quot;cff8e508-ba35-4e2b-99d6-fa375f1fc2da&quot; autocomplete=&quot;off&quot; required=&quot;required&quot; data-handler-change=&quot;1&quot;&gt;
      &lt;label for=&quot;form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_2&quot;&gt;Undecided&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://codepen.io/WpEmbraded/pen/MWjBodp" rel="nofollow noreferrer"><strong>Here's a Live demo of the radio buttons</strong></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
  }
  .form_response &gt; label {
      cursor: pointer;
      display: block;
      background-color: #182B54;
      padding: 10px 20px;
      font-size: 18px;
      color: #fff;
      font-weight: 500;
      margin-left: 0;
  }
  .form_response &gt; label:hover {
      color: #182B54;
      background-color: #FED007;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form_responses"&gt;
      &lt;div class="form_response"&gt;
          &lt;input id="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_1" type="radio" data-text="Yes" name="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e" checked="checked" value="923518fd-e6ce-4989-8342-15d9b22e5a20" autocomplete="off" required="required" data-handler-change="1"&gt;
          &lt;label for="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_1"&gt;Yes&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="form_response"&gt;
          &lt;input id="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_2" type="radio" data-text="Undecided" name="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e" value="cff8e508-ba35-4e2b-99d6-fa375f1fc2da" autocomplete="off" required="required" data-handler-change="1"&gt;
          &lt;label for="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_2"&gt;Undecided&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>