Is there a way to have the CSS transparency style apply only to the label's innerText and not to any child elements?

Question

In the example below, I have a lot of tags where the tags contain inputs.

Is there a way to make the CSS opacity style apply to the label's innerText rather than any child elements without explicitly specifying the color? In the example below, opacity has been applied to the dropdown menu, not just the label itself.

I know I could change the label element to just surround the text and then add a for=, but I prefer to wrap the label around the element being tagged.

div{ padding: 10px;}

select {
  background-color: white;
}
.colored{
  color: white;
  background-color: lightblue;
}
   
label {
  opacity: .7;
}

<div class="colored">
   <label>
      My white label
      <select><option>example that should be black-on-white</option></select>
   </label>
</div>

<div>
   <label>
      My black label
      <select><option>example that should be black-on-white</option></select>
   </label>
</div>
<div>
<label for="select3">Good example</label>
<select id="select3"><option>example that is indeed black-on-white</option></select></div>

Answer 1

Unfortunately, opacity applies to the container and everything in it. But in your case you can use rgba color instead:

select {
  background-color: white;
}
.colored{
  color: white; 
  background-color: lightblue;
  padding: 10px;
}

label {
  color: rgba(255, 255, 255, .7);
}

<div class="colored">
   <label>
      我的标签
      <select><option>示例</option></select>
   </label>