我怎样才能只给单选按钮的圆形轮廓上色？

Question

我使用了 :hover 然后是 accent-color 但是当它被点击时它给整个按钮赋予了颜色。当我悬停时，我只希望圆圈改变颜色。例如，图片中的按钮未被单击，但圆圈在悬停时将颜色更改为蓝色。

<input type="radio" >

input:hover{
    accent-color: blue;
}

只有当您点击按钮并将鼠标悬停在它上面时，它才会改变颜色。我只希望圆圈（轮廓）在悬停时改变颜色，而不是在单击时改变整个颜色。

Answer 1

希望对您有所帮助

.radio1{
  border:2px solid white;
  box-shadow:0 0 0 1px rgb(18, 18, 18);
  appearance:none;
  border-radius:50%;
  width:12px;
  height:12px;
  background-color:#fff;
}
.radio1:hover{
  box-shadow:0 0 0 1px blue;
  cursor: pointer;
}
.radio1:checked{
  background-color:blue;
}

<input class="radio1" type="radio" name="modified" />Modified