How to change the css for a label?

Question

how do I change the opacity of a checked label?

label {
opacity:.5;
}
input[name="myname"]:checked + label {
opacity:1;
}

<div class="my-input">
<input type="radio" id="myid1" name="myname" />
<input type="radio" id="myid2" name="myname" />
<input type="radio" id="myid3" name="myname" />
</div>
<div class="my-label">
<label for="myid1">content label 1</label>
<label for="myid2">content label 2</label>
<label for="myid3">content label 3</label>
</div>

how to change this code?

input[name="myname"]:checked + label

I changed this:

input[name="myname"]:checked > label

But this does not work.

What exactly are you trying to build? Is your HTML structure fixed? — Sven van de Scheur, Jul 25 '19 at 08:15
I can not change the html structure. I have to stay that way. — Mahdi, Jul 25 '19 at 08:17
Well, changing to `input[name="myname"]:checked > label` won't work as it will be explicit child element and label is not child of input. Have you tried `~` sibling selector ? — Harish Boke, Jul 25 '19 at 08:19
This question should be opened up. Its not a duplicate, the solution of the 'duplicate' question does not work. — Gosi, Jul 25 '19 at 08:34
It _is_ a duplicate, in that the referred thread explains why what gets demanded here is _not possible_ - not with that HTML structure. And if the HTML structure can not be changed, then that vital information should have been included in the question to begin with, and not only mentioned in a comment on an answer for the first time. — misorude, Jul 25 '19 at 09:01

Nick Van Loocke · Accepted Answer · 2019-07-25T09:00:38.007

1

You need to change your HTML to this:

label {
  opacity: .5;
}

input[name="myname"]:checked+label {
  opacity: 1;
}

<div class="radio-item">
  <input type="radio" id="myid1" name="myname" />
  <label for="myid1">content label 1</label>
</div>

<div class="radio-item">
  <input type="radio" id="myid2" name="myname" />
  <label for="myid2">content label 2</label>
</div>

<div class="radio-item">
  <input type="radio" id="myid3" name="myname" />
  <label for="myid3">content label 3</label>
</div>

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio for more information about radio items.

If you can't change your HTML structure then JavaScript is the way to go.

var id;

$('input[type="radio"]').on('click', function(e) {
  // Find the selected radio item and store the id
  id = $(this).attr('id');
  
  // Reset the labels
  $('label').removeClass('active');
  
  // Set active state on the correct label based on the id
  $('label[for="' + id + '"]').addClass('active');
});

label {
  opacity:.5;
}
label.active {
  opacity:1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-input">
  <input type="radio" id="myid1" name="myname" />
  <input type="radio" id="myid2" name="myname" />
  <input type="radio" id="myid3" name="myname" />
</div>
<div class="my-label">
  <label for="myid1">content label 1</label>
  <label for="myid2">content label 2</label>
  <label for="myid3">content label 3</label>
</div>

edited Jul 25 '19 at 09:00

answered Jul 25 '19 at 08:18

Nick Van Loocke

433
2
11

I can not change the html structure! – Mahdi Jul 25 '19 at 08:20
1

Just a small typo: ur 3rd radio is calling myid2, should be calling myid3 – Gosi Jul 25 '19 at 08:21
@Mahdi can you explain why your HTML can't change? Maybe there is a way to create your lay-out with my HTML and some extra CSS? – Nick Van Loocke Jul 25 '19 at 08:24
If you change the html structure, the display mode changes – Mahdi Jul 25 '19 at 08:27
@Mahdi here you have an example I fastly created with my HTML and some extra CSS so you have your first lay-out https://jsfiddle.net/arh1ngtk/ It's not the most dynamic code I know but maybe gives this an idea that there is a way to do this without JavaScript? If you like to do this with JavaScript then you can do this with a click event and use the id of the input field to find the related label. – Nick Van Loocke Jul 25 '19 at 08:45
@Nick_Van_Loocke Can you give JavaScript example code? – Mahdi Jul 25 '19 at 08:49
@Mahdi I've explained it in my answer or you can also view it on https://jsfiddle.net/arh1ngtk/1/ – Nick Van Loocke Jul 25 '19 at 09:01

How to change the css for a label?

1 Answers1