Are CSS Variable Changes Possible Upon a Radio Button's Checked Selector Being Triggered

Are CSS Variable changes possible upon a radio button's checked selector being triggered?

With your actual code this is not possible. From the specification:

Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules, can be made conditional with @media and other conditional rules, can be used in HTML’s style attribute, can be read or set using the CSSOM, etc.

As you can read, Custom properties (i.e. CSS variables) are ordinary properties so if you don't have a parent/child relation to use inheritance you cannot share a value between different elements.

Here is a basic example to better understand the issue:

:root {

  --c:red;

}

.box {

  /* --c:blue (uncomment this to change the color)*/

}

.element {

  background:var(--c);

  height:50px;

}

.extra {

  --c:green; /* this will do nothing */

}

<div class="box">

  <div class="element"></div>

</div>

<div class="extra"></div>

OnChange event handler for radio button (INPUT type=radio) doesn't work as one value

var rad = document.myForm.myRadios;

var prev = null;

for (var i = 0; i < rad.length; i++) {

    rad[i].addEventListener('change', function() {

        (prev) ? console.log(prev.value): null;

        if (this !== prev) {

            prev = this;

        }

        console.log(this.value)

    });

}

<form name="myForm">

  <input type="radio" name="myRadios"  value="1" />

  <input type="radio" name="myRadios"  value="2" />

</form>

css - Input radio button to target outter label when checked

You should use JS.

When input element is inside the label then we do not need id on the element and 'for' attribute on the label, but when it is outside we need it.

<label>
  Foo
  <input name="foo" type="checkbox" />
</label>

Based on your HTML Code, To alter the styling of the label, would require a selector that affected the parent, which currently isn't possible.
Why? https://css-tricks.com/parent-selectors-in-css/

<input id="foo" name="foo" type="checkbox" />
<label for="foo">Foo</label>

So, to select the label of the :checked input, we need the label to be adjacent, not the parent.

But in your code, HTML's label and input is implicit connecting. So I think the solution is to use JS.

let form = document.querySelector("form");

form.addEventListener("change", (event) => {
  let target = event.target;
  let targetParent = target.parentElement;

  if (
    target.type === "radio" &&
    targetParent &&
    targetParent.tagName.toLowerCase() === "label"
  ) {
    let prior = form.querySelector('label.checked input[name="' + target.name + '"]');
    if (prior) {
      prior.parentElement.classList.remove("checked");
    }
    targetParent.classList.add("checked");
  }
}, false);

.switch-field {
  display: flex;
  margin-bottom: 36px;
  overflow: hidden;
}

.switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.switch-field label {
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  padding: 8px 16px;
  margin-right: -1px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
  cursor: pointer;
}

.switch-field label.checked {
  background-color: #a5dc86;
  box-shadow: none;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}

<form class="form">
  <div class="switch-field">
    <label class="checked">
      <input type="radio" name="switch-two" value="yes" checked />
      One
    </label>
    <label>
      <input type="radio" name="switch-two" value="maybe" />
      Two
    </label>
    <label>
      <input type="radio" name="switch-two" value="no" />
      Three
    </label>
  </div>
</form>

CSS Variables not global?

You're not actually targeting the hidden div. Try using the adjacent selector.

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

:root {

  --op: hidden;  

}

button:hover {

  background-color: yellow;

}

button:hover + div {

  --op: visible;

}

div {

  visibility: var(--op);

  width: 100px;

  height: 100px;

  background-color: red;

}

<button>Hover</button><div></div>

Radio Input Check/Uncheck when clicked on label

What you have is all a bit less than optimal.

First off you should give your inputs a class to not get all your inputs in scope, but we will ignore that for now but WILL give it a proper type and anchor it to a NEW div I added with the ID not in the original.

Do NOT remove or try to add the checked attribute, it happens on change automatically and doing it will prevent resetting it. Use .prop() instead if needed.

One issue you need is that you need to find the siblings of the radio that changed and set those - they will "unset/change" - radios are single of a group BUT the change event will not fire in "unset" cases hooked this way. You COULD give them ALL a class and anchor to that but I present a solution without that extra in the markup.

Don't use the click event, use change, (what if it changes via script?)

$('#customer_preferences_form')

 .on('click','label', function(event){

      event.preventDefault();

      event.stopImmediatePropagation();

      var myradio = $(this).find('input[type=radio]');

      var isChecked = myradio.is(":checked");

      myradio.prop("checked",!isChecked );

      myradio.trigger('setlabelstate');

  });

 $('#customer_preferences_form')

 .on('change setlabelstate','input[type=radio]',function() {

    // I used the label here to prevent the DIV sibling with title from

    // having that class added - only the label siblings are needed.

    var mySiblings = $(this).parent('label').siblings('label');

    var radios = $(this).parent('label')

        .add(mySiblings );

    radios.each(function(){

        var isChecked = $(this).find('input[type=radio]').is(":checked");

        $(this).toggleClass("radio_checked", isChecked );

    });

});

 

// custom event to set that initial state

$('#customer_preferences_form')

.find('input[type=radio]')

.trigger('setlabelstate');

#customer_preferences_form{

  margin-top: 50px;

  padding-right: 6.5%;

}

.container_banana, .container_apple, .container_guava, .container_strawberry, .container_pineapple, .container_mango{

    margin-left: 6.5%;

    margin-top: 20px;

    width: 43.5%;

    float: left;

    border: 1px solid grey !important;

    border-radius: 6px;

    padding: 0 !important;

    overflow: hidden;

}

.field_title{

  border-bottom: 1px solid grey !important;

    margin: 0 !important;

    padding: 5px 15px;

    display: inline-block;

    width: 100%;

    float: left;

}

.field_title label{

      text-align: center;

    font-size: 18px!important;

    font-weight: normal!important;

margin: 0 0 3px;

width: 100% !important;

display:inline-block;

cursor: default !important;

}

#customer_preferences_form label{

  width: 50%;

  display: inline-block;

  float: left;

  text-align: center;

  padding: 5px 0px;

  cursor: pointer;

}

#customer_preferences_form label:nth-child(2){

  border-right: 1px solid black;

}

#customer_preferences_form input[type="radio"]{

  display:none;

}

#customer_preferences_form label.radio_checked{

    color: #00d8a9;

    background: #FAFAFA;

    font-weight:bold;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="customer_preferences_form">

  <div class="container_mango">

    <div class="field_title">

      <label>Mango</label>

    </div>

    <label>

      <input type="radio" name="mango" value="1"> Not Interested

    </label>

    <label>

      <input type="radio" name="mango" value="2"> My Fav!

    </label>

  </div>

  <div class="container_pineapple">

    <div class="field_title">

      <label>Pineapple</label>

    </div>

    <label>

      <input type="radio" name="pineapple" value="1" checked="checked"> Not Interested

    </label>

    <label>

      <input type="radio" name="pineapple" value="2"> My Fav!

    </label>

  </div>

</div>

How to style the parent label of a checked radio input

A possibility

At my time of posting, I am not exactly sure what the desired layout should be, but there is one specific problem in the attempted CSS that needs to be addressed.

The adjacent siblings selector:

... separates two selectors and matches the second element only if it immediately follows the first element.

If the <input> is a child of the <label>, it isn't adjacent, so while:

label.radio input[type="radio"]:checked + label

is looking for a label immediately following a :checked input inside a label with the class .radio, nothing like that exists.

To alter the styling of the label in this case, would require a selector that affected the parent, which currently isn't possible.

So, to select the label of the :checked input, we need the label to be adjacent, not the parent.

We can use the for="id" attribute:

A <label> can be associated with a control either by placing the control element inside the <label> element, or by using the for attribute.

As I said, I'm not exactly sure what the desired layout should be, but here's an example using the for attribute, that doesn't look too bad.

div {

  display: inline-block;

  position: relative;

}

label {

  background: #fcb608;

  padding: 2px 10px 2px 1.5em;

  border: 1px solid transparent; /* keeps layout from jumping */

}

input {

  position: absolute;

}

input[type="radio"]:checked + label {

  background: #000;

  border-color: green;

  color: white;

}

<div>

  <input id="id1" type="radio" name="ad_caroserie" value="0">

  <label for="id1" class="radio">Berlina</label>

</div>

<div>

  <input id="id2" type="radio" name="ad_caroserie" value="1">

  <label for="id2" class="radio">Break</label>

</div>

<div>

  <input id="id3" type="radio" name="ad_caroserie" value="2">

  <label for="id3" class="radio">Cabrio</label>

</div>

---

Related Topics