使用纯CSS单击“单击单击”时，更改标签内部元素的边框颜色

发布于 2025-02-10 22:45:26 字数 707 浏览 1 评论 0原文

检查单个按钮时，我正在尝试更改跨度元素的边框颜色。但是我的代码不起作用。这是我的代码的简单版本：

.try-2 {
  border-left: 3px solid pink;
  padding-left: 5px;
}

input[type="radio"]:checked .try-2 {
  border-left: 3px solid blue;
}

<input type="radio" id="html-css" name="fav_language" value="HTML-CSS">
<label for="html-css">
  <span class="try-1">HTML</span>
  <span class="try-2">CSS</span>
</label><br>
<input type="radio" id="js" name="fav_language" value="JS">
<label for="js">JS</label><br>

原文

I am trying to change a border color for a span element when the radio button is checked. But my code is not working.
Here's a simpler version of my code:

.try-2 {
  border-left: 3px solid pink;
  padding-left: 5px;
}

input[type="radio"]:checked .try-2 {
  border-left: 3px solid blue;
}

<input type="radio" id="html-css" name="fav_language" value="HTML-CSS">
<label for="html-css">
  <span class="try-1">HTML</span>
  <span class="try-2">CSS</span>
</label><br>
<input type="radio" id="js" name="fav_language" value="JS">
<label for="js">JS</label><br>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

可是我不能没有你 2025-02-17 22:45:26

您的问题是，span不是输入的同胞。输入的兄弟姐妹是Label。您必须将选择器更改为：input [type =“无线电”]：检查〜标签跨度

.try-2 {
  border-left: 3px solid pink;
  padding-left: 5px;
}

input[type="radio"]:checked ~ label span {
  border-left: 3px solid blue;
}

<input type="radio" id="html-css" name="fav_language" value="HTML-CSS">
<label for="html-css">
  <span class="try-1">HTML</span>
  <span class="try-2">CSS</span>
</label><br>
<input type="radio" id="js" name="fav_language" value="JS">
<label for="js">JS</label><br>

Your issue is, that span is not the sibling of the input. The sibling of the input is the label. You have to change your selector to: input[type="radio"]:checked ~ label span

.try-2 {
  border-left: 3px solid pink;
  padding-left: 5px;
}

input[type="radio"]:checked ~ label span {
  border-left: 3px solid blue;
}

<input type="radio" id="html-css" name="fav_language" value="HTML-CSS">
<label for="html-css">
  <span class="try-1">HTML</span>
  <span class="try-2">CSS</span>
</label><br>
<input type="radio" id="js" name="fav_language" value="JS">
<label for="js">JS</label><br>

回复收藏 0 原文

~没有更多了~