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

CSS select text next to a label and input

how to select unwrapped text inside a label that is next to an input?

<label class="myLabel">
   <input type"checkbox" class="myCheckbox" />
   Apples
</label>
<label class="myLabel">
   <input type"checkbox" class="myCheckbox" />
   Bananas
</label>
<label class="myLabel">
   <input type"checkbox" class="myCheckbox" />
   Oranges
</label>
<label class="myLabel">
   <input type"checkbox" class="myCheckbox" />
   Peaches
</label>
<label class="myLabel">
   <input type"checkbox" class="myCheckbox" />
   Strawberries
</label>

i would like to change the background of the unwrapped text when input type=checkbox is checked.

i tried >* but it only works for wrapped elements

Tags:

2

Answers


  1. 0

    You could put a pseudo element behind the text:

    .myLabel{
  display: inline-block;
  position:relative;
}
.myLabel::before{
  z-index:-1;
  content:'';
  position:absolute;
  background: yellow;
  left: 22px;
  right: -2px;
  top:0;
  bottom:0;
  display:block;
}
.myLabel:has(:checked)::before{
  background: lime;
}
.myLabel:has(:checked){
  font-weight:bold;
}
    <label class="myLabel">
   <input type="checkbox" class="myCheckbox">
   Apples
</label>
<label class="myLabel">
   <input type="checkbox" class="myCheckbox">
   Bananas
</label>
<label class="myLabel">
   <input type="checkbox" class="myCheckbox">
   Oranges
</label>
<label class="myLabel">
   <input type="checkbox" class="myCheckbox">
   Peaches
</label>
<label class="myLabel">
   <input type="checkbox" class="myCheckbox">
   Strawberries
</label>
    Login or Signup to reply.
  2. 0

    For people coming here in search of an answer that doesn’t follow the strict criteria of only being able to only use CSS, but one that is widely supported I’d like to mention the possibility of using the "for" keyword on the label.

    With this approach you will however have to add that key to the label element as well as place the select checkbox input outside of the label element.

    So the HTML will have to be slightly altered but this actually has wide browser support instead of the has() selector which has very limited support.

    .myLabel {
  display: inline-block;
  position: relative;
}

.myCheckbox:checked + .myLabel {
  font-weight: bold;
}


<input type="checkbox" class="myCheckbox" id="myCheckbox1">
<label class="myLabel" for="myCheckbox1">
  Apples
</label>
  <input type="checkbox" class="myCheckbox" id="myCheckbox2">
<label class="myLabel" for="myCheckbox2">
  Bananas
</label>
  <input type="checkbox" class="myCheckbox" id="myCheckbox3">
<label class="myLabel" for="myCheckbox3">
   Bananas
</label>
  <input type="checkbox" class="myCheckbox" id="myCheckbox4">
<label class="myLabel" for="myCheckbox4">
  Peaches
</label>
  <input type="checkbox" class="myCheckbox" id="myCheckbox5">
<label class="myLabel" for="myCheckbox5">
   Strawberries
</label>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search