how can I colorize radio button circle outline only?

Question

I used :hover and then accent-color but it gives color to whole button when it's clicked. I just want only the circle to change color when I hover over. for example like in the picture button is not clicked but circle changes color to blue on hover.

<input type="radio" >

input:hover{
    accent-color: blue;
}

it changes color only when button is clicked and you hover over it. I want only circle(outline) to change color on hover and not the whole when its clicked.

Answer 1

I hope this could help you.

.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