Question

我有一台收音机，当用户将鼠标悬停在其上方时，选项从灰色变为黑色。但是我希望选中的选项保持黑色，即使用户不再将鼠标悬停在它上面也是如此。我完全无法做到这一点。

label {
  color: grey;
}

label:hover {
  cursor: pointer;
  color: black;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked+label {
  color: black;
}

<div star-buttons>
  <label><input class="star-buttons" type="radio" name="radio" value="1"> ☆ <br></label>
  <label><input class="star-buttons" type="radio" name="radio" value="2"> ☆ ☆<br></label>
  <label><input class="star-buttons" type="radio" name="radio" value="3"> ☆ ☆ ☆<br></label>
  <label><input class="star-buttons" type="radio" name="radio" value="4"> ☆ ☆ ☆ ☆<br></label>
  <label><input class="star-buttons" type="radio" name="radio" value="5"> ☆ ☆ ☆ ☆ ☆<br></label>
</div>

我试图在CSS的最后一行中做类似的事情，但这没有用。我该如何完成？

Answer 1

+是同级选择器，带有此标记的标签是父级。 CSS中没有父选择器。但是，我们仍然可以做到这一点！在星星周围放置包装纸，以利用兄弟姐妹选择器，如下所示：

label {
  color: grey;
}

label:hover {
  cursor: pointer;
  color: black;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + .stars-txt {
  color: black;
}

<div>
  <label>
    <input class="star-buttons" type="radio" name="radio" value="1">
    <div class="stars-txt">☆</div>
  </label>
  <label>
    <input class="star-buttons" type="radio" name="radio" value="2">
    <div class="stars-txt">☆ ☆</div>
  </label>
  <label>
    <input class="star-buttons" type="radio" name="radio" value="3">
    <div class="stars-txt">☆ ☆ ☆</div>
  </label>
  <label>
    <input class="star-buttons" type="radio" name="radio" value="4">
    <div class="stars-txt">☆ ☆ ☆ ☆</div>
  </label>
  <label>
    <input class="star-buttons" type="radio" name="radio" value="5">
    <div class="stars-txt">☆ ☆ ☆ ☆ ☆</div>
  </label>
</div>

Answer 2

您应该将输入内容设置在标签的外部和前面，以便选择器input[type="radio"]:checked+label与您的HTML匹配

如前所述 imput:checked + label将与<input><label></label>匹配，而不与<label><input></label>匹配。没有父母的选择器：（

请参阅：

是否存在关于标签和输入HTML元素嵌套的最佳实践？ Should I put input elements inside a label element?

和

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

HTML元素代表用户界面中某项的标题。

将a与元素相关联具有一些主要优点：

标签文本不仅在视觉上与其对应的文本输入相关联；而且它也以编程方式与之关联。这意味着，例如，当用户专注于表单输入时，屏幕阅读器将读出标签，从而使辅助技术用户更容易理解应输入哪些数据。

您可以单击关联的标签来聚焦/激活输入以及输入本身。命中区域的增加为尝试激活输入的任何人（包括使用触摸屏设备的人）提供了优势。

可能更新您的HTML

label {
  color: grey;
}

label:hover {
  cursor: pointer;
  color: black;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked+label {
  color: black;
}

<div star-buttons>
  <input class="star-buttons" type="radio" name="radio" value="1" id="a"><label for="a"> ☆ <br></label>
  <input class="star-buttons" type="radio" name="radio" value="2" id="b"><label for="b"> ☆ ☆<br></label>
  <input class="star-buttons" type="radio" name="radio" value="3" id="c"><label for="c"> ☆ ☆ ☆<br></label>
  <input class="star-buttons" type="radio" name="radio" value="4"id ="d"><label for="d"> ☆ ☆ ☆ ☆<br></label>
  <input class="star-buttons" type="radio" name="radio" value="5" id="e"><label for="e"> ☆ ☆ ☆ ☆ ☆<br></label>
</div>

Answer 3

将您的星形字符包装在<span>内，如下所示：

<label>
     <input class="star-buttons" type="radio" name="radio" value="1">
     <span>☆</span>
</label>

然后在您的CSS中，更改以下内容：

input[type="radio"]:checked + label {
  color: black;
}

对此：

input[type="radio"]:checked + span {
  color: black;
}

Answer 4

在您想看到那些满是彩色的星星的情况下，我会这样做：我不是在HTML中使用星星，而是在CSS中使用星星，而是在\02729（空星）和\0272d（实心星）之间切换。

label:nth-of-type(1)::before{content:'\02729'}
label:nth-of-type(2)::before{content:'\02729\02729'}
label:nth-of-type(3)::before{content:'\02729\02729\02729'}
label:nth-of-type(4)::before{content:'\02729\02729\02729\02729'}
label:nth-of-type(5)::before{content:'\02729\02729\02729\02729\02729'}



input[type="radio"]:checked + label:nth-of-type(1)::before{content:'\0272d'}
input[type="radio"]:checked + label:nth-of-type(2)::before{content:'\0272d\0272d'}
input[type="radio"]:checked + label:nth-of-type(3)::before{content:'\0272d\0272d\0272d'}
input[type="radio"]:checked + label:nth-of-type(4)::before{content:'\0272d\0272d\0272d\0272d'}
input[type="radio"]:checked + label:nth-of-type(5)::before{content:'\0272d\0272d\0272d\0272d\0272d'}

label {
  color: grey;
}

label:hover {
  cursor: pointer;
  color: black;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked+label {
  color: black;
}

<div star-buttons>
  <input class="star-buttons" type="radio" name="radio" value="1" id="_1"><label for="_1"></label><br>
  <input class="star-buttons" type="radio" name="radio" value="2" id="_2"><label for="_2"></label><br>
  <input class="star-buttons" type="radio" name="radio" value="3" id="_3"><label for="_3"></label><br>
  <input class="star-buttons" type="radio" name="radio" value="4"id ="_4"><label for="_4"></label><br>
  <input class="star-buttons" type="radio" name="radio" value="5" id="_5"><label for="_5"></label>
</div>

Answer 5

只需保留标签：黑色并清除所有试试看！重要它将保持黑色输入已经不显示任何内容，因此CSN无关紧要

选中后，获取单选按钮标签以保持相同的颜色

5 个答案: