vue3 input单选框改变选中状态的颜色

要改变单选框选中状态的颜色，可以使用 CSS 中的 `:checked` 伪类选择器来实现。

首先，在单选框的样式中，使用 `:checked` 伪类选择器来选择选中状态的样式，例如：

input[type="radio"]:checked {
  border-color: #42b983; /* 改变选中状态的边框颜色 */
  background-color: #42b983; /* 改变选中状态的背景颜色 */
}

然后，在 Vue3 中，可以使用 `v-bind` 指令来绑定单选框的选中状态，例如：

<template>
  <div>
    <label>
      <input type="radio" v-bind:checked="selected === 'option1'" v-on:change="selected = 'option1'">
      Option 1
    </label>
    <label>
      <input type="radio" v-bind:checked="selected === 'option2'" v-on:change="selected = 'option2'">
      Option 2
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 'option1'
    }
  }
}
</script>

在上面的例子中，使用了 `v-bind:checked` 来绑定单选框的选中状态，如果 `selected` 的值等于对应选项的值，则该单选框被选中。同时，使用了 `v-on:change` 来监听单选框的选中状态改变事件，并更新 `selected` 的值。

这样，当单选框被选中时，对应的样式就会生效，从而改变选中状态的颜色。