vant checkbox 复选框 样式改写

本文主要是介绍vant checkbox 复选框 样式改写，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

修改前

修改后

基于

vant： 4.8.3

unocss: 0.53.4

<van-checkbox-group v-model="query.zczb" shape="square"  class="text-16 w-100% flex flex-wrap"><template v-for="item in registerCapitalOption"><van-checkbox :name="item.mkz" class="mr-8 mt-5 w-45% flex flex-type  justify-center rounded-8"><template #icon="props"><div class="w-0"></div></template><template #default="props" ><div class="border-1 border-solid" :class="props.checked ? 'text-[#006CFFFF]  border-[#006cff] bg-[#E6F4FF]' : 'bg-[#F5F7FBFF] border-[#F5F7FBFF] text-[#000000D9]' " >{{ item.mkz }}</div></template></van-checkbox></template>
</van-checkbox-group>            

样式

<style lang='scss' scoped>
.flex-type {:deep(.van-checkbox__label) {width: 100%;display: flex;justify-content: center;}:deep(.van-checkbox__label > div) {width: 100%;display: flex;justify-content: center;border-radius: 8px;padding: 10px 0;}
}
</style>

这篇关于vant checkbox 复选框 样式改写的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---