How to style the parent label of a checked radio input

user_5348342 0
Viewed 34032

I need to stylize some radio inputs. I tried some solutions from here but none worked for me. Can someone please take a look at this code and tell me what can I do?

This is the HTML:

<div class="controls">
  <table>
    <tbody>
      <tr>
        <td>
          <label class="radio">
            <input type="radio" name="ad_caroserie" value="0">Berlina
          </label>
        </td>
        <td>
          <label class="radio">
            <input type="radio" name="ad_caroserie" value="1">Break
          </label>
        </td>
        <td>
          <label class="radio">
            <input type="radio" name="ad_caroserie" value="2">Cabrio
          </label>
        </td>
      </tr>
    </tbody>
  </table>
</div>

And the CSS:

label.radio {
  background: #fcb608;
}
.radio input {
  display: none;
}
label.radio input[type="radio"]:checked + label {
  background: #000 !important;
  border: 1px solid green;
  padding: 2px 10px;
}

The CSS doesn't have the desired effect; Can you please help me?

This is some related excerpts of JS: 

//If checkboxes or radio buttons, special treatment

  else if (jQ('input[name="'+parentname+'"]').is(':radio')  || jQ('input[name="'+parentname+'[]"]').is(':checkbox')) {
    var find = false;
    var allVals = [];
    jQ("input:checked").each(function() {
      for(var i = 0; i < parentvalues.length; i++) {
        if (jQ(this).val() == parentvalues[i] && find == false) {  
          jQ('#adminForm #f'+child).show();
          jQ('#adminForm #row_'+child).show();
          find = true;
        }
      }
    });
    if (find == false) {
      jQ('#adminForm #f'+child).hide();
      jQ('#adminForm #row_'+child).hide();
      //cleanup child field 
      if (jQ('#adminForm #f'+child).is(':checkbox') || jQ('#adminForm #f'+child).is(':radio')) {
        jQ('#adminForm #f'+child).attr('checked', false);
      }
      else {
        if (cleanValue == true) {
          jQ('#adminForm #f'+child).val('');
        }
      }
    }
  }
  else {
    var find = false;
    for(var i = 0; i < parentvalues.length; i++) {
      if (jQ('#adminForm #f'+parentname).val() == parentvalues[i] && find == false) {  
        jQ('#adminForm #f'+child).show();
        jQ('#adminForm #row_'+child).show();
        find = true;
      }
    }
    if(find == false) {
      jQ('#adminForm #f'+child).hide();
      jQ('#adminForm #row_'+child).hide();
      //cleanup child field 
      if (jQ('#adminForm #f'+child).is(':checkbox') || jQ('#adminForm #f'+child).is(':radio')) {
        jQ('#adminForm #f'+child).attr('checked', false);
      }
      else {
        if (cleanValue == true) {
          jQ('#adminForm #f'+child).val('');
        }
      }
    }
  }
}

function dependency(child,parentname,parentvalue) {
  var parentvalues = parentvalue.split(",");
  //if checkboxes
  jQ('input[name="'+parentname+'[]"]').change(function() {
    checkdependency(child,parentname,parentvalues,true);
    //if checkboxes
    jQ('input[name="'+child+'[]"]').change();
    jQ('input[name="'+child+'"]').change();
    jQ('#'+child).change();
  });
  //if buttons radio
  jQ('input[name="'+parentname+'"]').change(function() {
    checkdependency(child,parentname,parentvalues,true);
    //if checkboxes
    jQ('input[name="'+child+'[]"]').change();
    jQ('input[name="'+child+'"]').change();
    jQ('#'+child).change();
  });
  jQ('#f'+parentname).click(function() {
    checkdependency(child,parentname,parentvalues,true);
    //if checkboxes
    jQ('input[name="'+child+'[]"]').change();
    jQ('input[name="'+child+'"]').change();
    jQ('#f'+child).change();
  });
  checkdependency(child,parentname,parentvalues,false);
}
radio-button css html
4 Answers

Just use jQuery with a new css class "selected" something like this:

on start:

$("input[name='ad_caroserie']:checked").parent().addClass("selected");

and onchange:

$('input[type=radio][name=ad_caroserie]').change(function() {
  $("input[name='ad_caroserie']").parent().removeClass("selected");
  $("input[name='ad_caroserie']:checked").parent().addClass("selected");
  // console.log($("input[name='ad_caroserie']:checked").val());
});
user_45972660

After trying so many time with pure HTML and CSS. I am settling with this simple solution with JavaScript. I think this will help.

function check(btn) {
  let label = btn.children;
  label[0].checked = true;
}
.lib-radio {
  color: #1e1e1e;
  font-size: 1.0em;
  border-radius: 31px;
  font-weight: 400;
  width: 450px;
  height: 40px;
  border: 2px solid black;
  padding: 0.5em;
  font-family: Lato;
  margin: 10px 0 0 0;
}

.lib-radio:hover {
  background-color: #000;
  color: #FFF;
}
<div class="lib-one-input">

  <p class="lib-form-label">Select your gender</p>

  <div class="lib-radio" onclick="check(this)">

    <input id="s1yes" type="radio" name="mcq1" value="male">

    <label for="s1yes"> Yes, our researchers authored it</label><br />

  </div>

  <div class="lib-radio" onclick="check(this)">

    <input id="s1no" type="radio" name="mcq1" value="female">

    <label for="s1no"> No, we didn&#39t author it </label><br />

  </div>

</div>

user_91352090 
<form id="button-form">
  <fieldset id="button-set">
    <label for="button-1">
      <input type="radio" id="button-1" name="button-group"/>
    </label>

    <label for="button-2">
      <input type="radio" id="button-2" name="button-group"/>
    </label>

    <label for="button-3">
      <input type="radio" id="button-3" name="button-group"/>
    </label>
  </fieldset>
</form>

<style>
  #button-set label > * {
    opacity: 0; <!-- hideing the radio buttons -->
  }
</style>

<script>
  function setColor(color) {
    document.getElementsByName("button-group").forEach(node => {
      node.checked === true
        ? (node.parentElement.style.background = color)
        : (node.parentElement.style.background = "rgba(0, 0, 0, 0.5)");
    });
  }

  window.onload = () => {
    document.getElementById("button-form").onchange = evt => {
      switch (evt.target) {
        case document.getElementsById("button-1"):
          setColor("rgba(0, 150, 0, 0.5)");
          break;
        case document.getElementsById("button-2"):
          setColor("rgba(250, 200, 0, 0.5)");
          break;
        case document.getElementsById("button-3"):
          setColor("rgba(250, 0, 0, 0.5)");
          break;
      }
    };
  };
</script>
user_109746980
Related