CSS Select 标签旁边的文本并输入

发布于08月11日

如何 Select 输入旁边的标签内的未换行文本？

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

我想在选中输入type=checkbox时更改未换行文本的背景.

我try 了>* ，但它只对包装的元素有效

推荐答案

您可以在文本后面添加一个伪元素:

.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>