Input框背景颜色的修改 强调色（accent-color）

最近还原一个原型图的时候出现了这个样式：

 

如上，点击后，这个input单选框的背景是绿色的。

实现：

html页

给input框绑定一个styleChange的变量，实现input框和变量之间的双向绑定，当点击复选框的时候，styleChange的值会发生变化。

<template>
<label for="box">
  <input id="box" type="checkbox" v-model="styleChange" :class="{'green': styleChange}"/>
  <span></span>
  只看负面
</label>
</template>

<script setup>
  import { ref } from "vue";
//设置初始为false
  const showNegative = ref(false);
</script>

接下来就是green样式的写法了：

.green { 
  accent-color: #0f783d; 
}

只需要accent-color这个属性就可以了

新的属性当然也会有些浏览器不支持，下面是浏览器的兼容情况