如何更改悬停时选中的单选按钮的颜色?

问题描述 投票:0回答:1
html css radio-button hover radio-group
1个回答
0
投票

不确定您为什么要这样做,但您可以做到。

body {
  margin: 1em;
  font-family: sans-serif;
}
.custom-radio>label {
  display: block;
  font-size: 1.5em;
  margin: 0.25em 0;
}

.custom-radio>label>input[type=radio] {
  transform: scale(2);
  vertical-align: middle;
  margin-right: 1em;
}

.custom-radio>label:nth-child(1)>input[type=radio] {
  accent-color: red;
}

.custom-radio>label:nth-child(2)>input[type=radio] {
  accent-color: darkorange;
}

.custom-radio>label:nth-child(3)>input[type=radio] {
  accent-color: green;
}

.custom-radio>label:hover {
  color: blue;
}

.custom-radio>label:hover>input[type=radio] {
  accent-color: blue;
}

.custom-radio>label>input[type=radio]:not(:checked) {
  cursor: pointer;
}
<div class="custom-radio">
  <label><input type="radio" name="radio1"> Stop</label>
  <label><input type="radio" name="radio1"> Wait</label>
  <label><input type="radio" name="radio1"> Go</label>
</div>

© www.soinside.com 2019 - 2024. All rights reserved.