Question 231715 in CSS Question posted in
Some basic documentation can be found here.

Is there any way to make the CSS opacity style apply only to the innerText of the label and not to any of the child elements

I have lots of labels in the following example, where the label contains the input.

Is there any way to make the CSS opacity style apply to the innerText of the label and not to any of the child elements, without specifying the color explicitly? In the example below, the opacity has applied to the drop-down, not just the label-proper.

I know I could change the label element to surround only the text and then add a for=, but I much prefer to wrap my labels around the labeled thing.

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>
Tags:

2

Answers


  1. 0

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

    div {
  padding: 10px;
}

select {
  background-color: white;
}

.colored {
  color: white;
  background-color: lightblue;
}

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

.colored label {
  color: rgba(255, 255, 255, .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>
    Login or Signup to reply.
  2. 0

    You can nest span tags inside of label elements and wrap the text in that. This will allow you to target just the text with opacity (or any other) styles.

    I would recommend doing this in general, in case you also need to apply spacing, custom typography, add a pseudo element, replace it with an image, translate the text, etc.

    Also – Keep an out for the color contrast, and make sure the text will be readable for people with low vision.

    label {
    /* Demo styles. */
    display:block;
    padding: 10px;
    margin-bottom: 1rem;
    font-weight: bold;
    font-family: sans-serif;
    outline: 1px solid #999;
}

label.light {
    background: white;
}

label.dark {
    background: black;
}

label.cornflowerblue {
    background: cornflowerblue;
}

span {
    opacity: 0.5;
    color: black;
}

label.dark span {
  color: white;
}
        <label class="light">
        <span>Dark text on light label</span>
        <select><option>Select Option</option></select>
    </label>
    <label class="dark">
        <span>Light text on dark label.</span>
        <select><option>Select Option</option></select>
    </label>
    <label class="light cornflowerblue">
        <span>Dark text on light blue label.</span>
        <select><option>Select Option</option></select>
    </label>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search