html - 选择后如何突出显示颜色？

Question

我已经为输入提供了焦点和活动属性，但它不起作用。选择任何颜色后，它不会突出显示。悬停属性虽然工作。

下面是我用来显示颜色高亮属性的代码。

.highlightC:focus,
.highlightC:focus-visible,
.highlightC:visited {
  border: 2px solid orange!important;
}

.highlightC:hover,
.highlightC:active {
  border: 2px solid white;
}

.highlightC {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid transparent;
}

.color1 {
  background-color: red;
}

.color2 {
  background-color: green;
}

.color3 {
  background-color: blue;
}

<div class="text-left mt-2">
  <p class="tpColorsHeading ">Available colors</p>
  <input type="radio" id="1" name="color" value="1" class="">
  <label for="1" class="dot color1 highlightC"></label>
  <input type="radio" id="2" name="color" value="2" class="">
  <label for="2" class="dot color2 highlightC"></label>
  <input type="radio" id="3" name="color" value="3" class="">
  <label for="3" class="dot color3 highlightC"></label>
</div>

标签： htmlcssbootstrap-4

Answer 1

您可以将:checked伪类选择器与+相邻的兄弟组合器结合使用：

.color-input {
  display: none;
}

.color-input:checked + .color-label {
  border-color: orange;
}

.color-label {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid transparent;
}

.color-label--red {
  background-color: red;
}

.color-label--green {
  background-color: green;
}

.color-label--blue {
  background-color: blue;
}

<fieldset>
  <legend>Available colors</legend>

  <input type="radio" id="1" name="color" value="1" class="color-input">
  <label for="1" class="color-label color-label--red"></label>
  
  <input type="radio" id="2" name="color" value="2" class="color-input">
  <label for="2" class="color-label color-label--green"></label>
  
  <input type="radio" id="3" name="color" value="3" class="color-input">
  <label for="3" class="color-label color-label--blue"></label>
</fieldset>