0

i trying to change background on radio button when someone choose it. I read a lot other theard and tried to do something similar with my code but without success.

Here is my HTML & CSS code. Do i need to use javascript to make this happend?

https://codepen.io/levskyy/pen/xxZWVqg

#frm_radio_10-0 input {
 display: none;
}

#frm_radio_10-0 {
font-family: 'Oswald', sans-serif;
color:#fff;
font-size:23px;
border-style:solid;
border-color: #262626;
border-radius:25px;
width:50%;
text-align:center;
margin:auto;
padding-bottom:10px;
background-color:#000;
margin-bottom:10px;
}

#frm_radio_10-0:hover {
background-color:red;
    -webkit-transition: all 200ms ease-in;
 -moz-transition: all 200ms ease-in;
}

#frm_radio_10-0 input:checked {
background-color:blue;
    -webkit-transition: all 200ms ease-in;
 -moz-transition: all 200ms ease-in;
}
<div class="frm_radio" id="frm_radio_10-0">

<label for="field_r8kt5-0">

<input type="radio" name="item_meta[10]" id="field_r8kt5-0" value="1.0" data-invmsg="text invalid"> Text</label>

</div>

Fixed this by jQuery:

<script> jQuery(document).on("change","input", function(){
if(jQuery(this).is(":checked")) 
jQuery(this).closest("label").addClass("checkedlabel");
}); 
</script>

and adding css for .checkedlabel

user3429079
  • 9
  • 5

3 Answers3

0

Bellow is your code edited to work, but I would also point out:

  • It looks like what you are trying to do (having a single on/off option) would be done best with a checkbox rather than a radio button.
  • In the HTML the input never goes inside the label, it goes next to it.
  • You should avoid using ids in your css if you can. Better to use classes.

#frm_radio_10-0 input {
  display: none;
}
#frm_radio_10-0 label {
  font-family: 'Oswald', sans-serif;
  color:#fff;
  font-size:23px;
  border-style:solid;
  border-color: #262626;
  border-radius:25px;
  width:50%;
  text-align:center;
  margin:auto;
  padding-bottom:10px;
  background-color:#000;
  margin-bottom:10px;
  display: inline-block;
}

#frm_radio_10-0 label:hover {
  background-color:red;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
}

#frm_radio_10-0 input:checked+label {
  background-color:blue;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
}
<div class="frm_radio" id="frm_radio_10-0">
<input type="radio" name="item_meta[10]" id="field_r8kt5-0" value="1.0" data-invmsg="text invalid">
<label for="field_r8kt5-0">Text</label>
alotropico
  • 1,682
  • 2
  • 13
  • 20
  • I made a little edit a minute after posting the answer. Sorry about that. – alotropico Jul 06 '20 at 22:31
  • Thanks, i use Formidable forms, co i can't make changes to html a lot. I allways try to use classes, forms have ID's so i must handle with it. I have a few radio buttons, but when i will fix one i will fix rest yourself. Thanks for help for sure! But like i said, i can't make changes to HTML so, it won't fix my problem :( – user3429079 Jul 06 '20 at 22:44
  • If you can't change the html nor use javascript there is no way to accomplish what you want with css alone. You can see further discussion about it here: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – alotropico Jul 09 '20 at 08:56
0

you could add some javascript to toggle html classes

<script>
document.getElementById("field_r8kt5-0").classList.toggle('frm_radio_10-0 frm_radio_10-0-checked ');
</script>

change them to classess

Ruvin
  • 46
  • 6
  • Thanks! But i have a problem when added your code. Chrome console says: Uncaught DOMException: Failed to execute 'toggle' on 'DOMTokenList': The token provided ('frm_radio_10-0 frm_radio_10-0-checked ') contains HTML space characters, which are not valid in tokens. – user3429079 Jul 06 '20 at 22:56
  • try this. you have to set each tag's classes. ``` <<< – Ruvin Jul 06 '20 at 22:59
0

instead of coding class="frm_radio" do "radio tags" and in your CSS use a period'.' instead of a hashtag because an id can only store one value in the same page.

python_man
  • 57
  • 7